是否可以让knockoutjs更新“初始数据”？目的？

发布于 2025-01-03 09:00:42 字数 1443 浏览 1 评论 0原文

下面是我尝试使用 knockoutjs 执行的操作的一个非常简化的示例：

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
        <script type="text/javascript">

            var derp = { "foo": 1, "bar": 2 };

            window.onload = function() { go(); }

            function go()
            {
                var ViewModel = function(foobar)
                {
                    this.foo = ko.observable(foobar.foo);
                    this.bar = ko.observable(foobar.bar);
                }

                ko.applyBindings(new ViewModel(derp));
            }

        </script>
    </head>
    <body>
        <input data-bind="value: foo"/>
        <input data-bind="value: bar"/>
        <button onclick="go();">Go</button>
    </body>
</html>

此代码的目标是让 knockoutjs 更新 derp 中的值，而不是 ViewModel 内部的副本。

有没有办法通过击倒轻松实现这一点，或者我是在找错树吗？

编辑上下文：

这是从一个更大的应用程序中挑选出来的。我的目的是使用剔除来显示和编辑大型、毛茸茸的 JavaScript 对象的属性。这些对象由用户动态实例化，并且可以随意切换。

在找到found Knockout之前，我都是手动创建DOM元素来进行每个对象的显示和编辑，这很混乱和繁琐。我有一些通过 C# 中的 WPF 进行 MVVM 的经验，并且更愿意使用这种方法。我对淘汰赛的最初理解是它会这样做，而没有意识到 ViewModel 复制 ko.observable* 捕获的值。 ViewModel 对我来说仍然有用，因为它允许我有条件地公开并简化对我想要编辑的成员的访问。

原文

Here's a much simplified example of what I'm trying to do with knockoutjs:

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
        <script type="text/javascript">

            var derp = { "foo": 1, "bar": 2 };

            window.onload = function() { go(); }

            function go()
            {
                var ViewModel = function(foobar)
                {
                    this.foo = ko.observable(foobar.foo);
                    this.bar = ko.observable(foobar.bar);
                }

                ko.applyBindings(new ViewModel(derp));
            }

        </script>
    </head>
    <body>
        <input data-bind="value: foo"/>
        <input data-bind="value: bar"/>
        <button onclick="go();">Go</button>
    </body>
</html>

The objective of this code is to have knockoutjs to update the the values in derp, not the copy inside of the ViewModel.

Is there a way to accomplish this easily with knockout, or am I barking up the wrong tree?

Edit for context:

This is culled from a much larger application. My intent was to use knockout to display and edit the properties of a large, wooly, javascript object. These objects are instantiated dynamically by the user, and can be switched between at-will.

Before I found found knockout, I was manually created DOM elements to do the displaying and editing of each object which was messy and cumbersome. I have some experience with MVVM via WPF in C#, and would have much preferred to use that approach. My initial understanding of knockout was that it'd do just that, not realizing that the ViewModel copies the values captured by ko.observable*. The ViewModel still has a use for me, as it allows me to conditionally expose and simplify access to the members I'd like to edit.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

信仰 2025-01-10 09:00:42

我确实喜欢使用 Save 方法的 @Etch 响应。这很有帮助。
但如果你想自动化这样的事情，那么我会在可观察量上使用 subscribe 。

也许这不是一个更干净的方法。如果我能够通过引用传递变量会更高兴。

我更喜欢使用一些围绕可观察量的包装来减少输入：

var returnFireObservable = function(variable, property) {
    var obs = ko.observable(variable[property]);
    obs.subscribe(function(newValue) {
        variable[property] = newValue;
    });
    return obs;
};

并以这种方式在代码中使用：

var ViewModel = function(foobar) {
    this.foo = returnFireObservable (foobar, "foo");
    this.bar = returnFireObservable (foobar, "bar");
};

ko.applyBindings(new ViewModel(derp));

小演示 http ://jsfiddle.net/AlfeG/eQ9Zf/2/

希望这有帮助。

I do like @Etch response with Save method. This helps a lot.
But if You want to automate such a things, then I would go with subscribe on observables.

Maybe it's not a cleaner way to do this. Would be more happy if I'm were able to pass variable by reference.

I've prefer to use some wrapper around observables to type less:

var returnFireObservable = function(variable, property) {
    var obs = ko.observable(variable[property]);
    obs.subscribe(function(newValue) {
        variable[property] = newValue;
    });
    return obs;
};

And use in code this way:

var ViewModel = function(foobar) {
    this.foo = returnFireObservable (foobar, "foo");
    this.bar = returnFireObservable (foobar, "bar");
};

ko.applyBindings(new ViewModel(derp));

Little demo http://jsfiddle.net/AlfeG/eQ9Zf/2/

Hope this helps.

回复收藏 0 原文

墨落画卷 2025-01-10 09:00:42

我不能百分百确定我完全理解你想要什么，但我会尝试一下。

您已将模型定义如下：

var ViewModel = function(foobar)
            {
                this.foo = ko.observable(foobar.foo);
                this.bar = ko.observable(foobar.bar);
            }

您使用 var derp = { "foo": 1, "bar": 2 }; 又名 Lotsmorecomplicatedobject 初始化了淘汰模型。

因此，您的输入将由于 data-bind 标记而获得这些值。然后，您修改这些输入值，然后单击“保存”按钮，并希望更新原始的 javascript 对象。

如果是这种情况，我会倾向于这样...

将您的 viewModel 更改为：

var ViewModel = function(foobar)
                {

                    this.foo = ko.observable(foobar.foo);
                    this.bar = ko.observable(foobar.bar);
                    save: function() { derp.foo = this.foo;
                                       derp.bar = this.bar;          
                        //  ko.utils.postJson(location.href, { obj1: this.foo, obj2: this.bar });
                    }
                }

然后将按钮单击事件更改为： ViewModel.save();

我添加了 postJson 对象作为示例，因为这就是我处理此类数据的方式。我将您传递到初始 ViewModel 定义中的变量视为如此。这是我想要预先填充我的视图模型的数据，从那时起，我将使用我的 ViewModel 来处理所有事情。一旦你采取了这种心态，你就不需要更新原始对象。

I am not 100% sure I fully understand what you want, but I will take a crack at it.

You have defined your model as so:

var ViewModel = function(foobar)
            {
                this.foo = ko.observable(foobar.foo);
                this.bar = ko.observable(foobar.bar);
            }

you initialized your knockout model with var derp = { "foo": 1, "bar": 2 }; aka lotsmorecomplicatedobject.

So your inputs will get those values due to the data-bind tag. You then modify those input values then hit the save button and want to update your original javascript object.

If that is the case I would lean towards this...

Change your viewModel to this:

var ViewModel = function(foobar)
                {

                    this.foo = ko.observable(foobar.foo);
                    this.bar = ko.observable(foobar.bar);
                    save: function() { derp.foo = this.foo;
                                       derp.bar = this.bar;          
                        //  ko.utils.postJson(location.href, { obj1: this.foo, obj2: this.bar });
                    }
                }

And then change your button click event to: ViewModel.save();

I added the postJson object as an example because this is how I handle that type of data. I look at the variable you pass into the initial ViewModel definition as just that.. Here is my data that I want to pre-populate my viewmodel from and from that point forward I use my ViewModel for everything. Once you take that mindset you dont have a need to update the original object.

回复收藏 0 原文

~没有更多了~