javascript - knockout 控制台日志和可观察到的未定义

我已经看到了有关控制台日志记录的观察结果的评论，但它似乎对我不起作用。此外，我的应用程序无法使用我期望的默认变量启动。
这两个问题在一起，因为我怀疑它们之间存在某种联系。

Here is the fiddle。

的HTML

<select data-bind="options: widgets, optionsText: 'name', value: current_widget, optionsCaption: 'Choose...'"></select>
<input data-bind="value: current_widget() ? current_widget().name : 'nothing'" />

Java脚本

var cdta = {};
$(document).ready(function(){

    cdta.widgets_data = [{ "name": "foo", "id": "1"},{ "name": "bar", "id": "2"},{ "name": "bash", "id": "3"},{ "name": "baq","id": "4"}];

    cdta.local = {};
    cdta.local.current_widget = { "name": "foo", "id": "1"};

    alert('current_widget starting value should be: ' + cdta.local.current_widget.name);

    function app() {
        var self = this;

        //widgets
        self.widgets = ko.observableArray(cdta.widgets_data);

        // which widget to display from a local source
        alert('about to asign a current_widget named:' + cdta.local.current_widget.name);
        self.current_widget = ko.observable(cdta.local.current_widget);
    }
    ko.applyBindings(new app());

    alert('after applying bindings name of current widget: ' + current_widget().name);
    //expecting foo
    //but doesn’t alert because current_widget isnt defined
});

最佳答案

您的代码中有几个问题。


current_widget是应用程序的属性，因此您需要执行以下操作

var app = new app();
ko.applyBindings(app);
alert('after applying bindings name of current widget: ' + app.current_widget().name);

由于您使用的是value和optionsCaption出价，因此默认情况下，剔除会将绑定到value的可观察对象设置为undefined。如果删除optionsCaption绑定，它将起作用。如果需要optionsCaption并需要选择初始值，则在应用绑定后必须将其重置：

var app = new app();
ko.applyBindings(app);
app.current_widget(cdta.widgets_data[0]); //you have to select an object from the array, not a completely unrelated object cdta.local.current_widget
alert('after applying bindings name of current widget: ' + app.current_widget().name);

更新：
我在＃2上错了。应用绑定后，您不必重置值。真正的问题是，您使用完全不相关的对象（而不是数组中的对象）作为初始值。这将解决问题：

cdta.local.current_widget = cdta.widgets_data[0];