javascript - 是否可以让 knockoutjs 更新 'initialdata' 对象?

标签 javascript data-binding mvvm viewmodel knockout.js

这是我尝试用 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 中的副本。

有没有一种方法可以通过 knockout 轻松实现这一目标,还是我找错了树?

根据上下文编辑:

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

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

最佳答案

我确实喜欢使用 Save 方法的 @Etch 响应。这很有帮助。 但是如果你想自动化这样的事情,那么我会选择 subscribe on observables。

也许这不是一种更简洁的方法。如果我能够通过引用传递变量会更开心。

我更喜欢在 observables 周围使用一些包装器来减少输入:

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/

希望这对您有所帮助。

关于javascript - 是否可以让 knockoutjs 更新 'initialdata' 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9200193/

相关文章:

android - 如何将 UnManaged 转换为 Realm 中的托管列表。我正在将 Kotlin 与 MVVM 一起用于 Android

javascript - 使用嵌入的文本区域内容高度动态增加 ionic 列表项高度

javascript - 将多个脚本和 css 标签分解为一个文件

wpf - 在 WPF 中重新计算可绑定(bind)对象的聚合?

wpf - ICommand 不使用 CanExecute 更新按钮上的 IsEnabled

c# - 基于项目属性的网格背景颜色

javascript - 如何在 then() 链中使用 promise.all

javascript - audio.js 播放器无法在 IE 9 及更低版本中加载

javascript - ng-model 不更新 Controller 值

具有嵌套转发器的 ASP.NET Repeater 控件