javascript - 如何将文本框值正确绑定回可观察数组中的模型？

Question

我有一个具有可观察数组的模型，我可以在文本框中显示数据，但我不知道如何将其绑定回原始数组。

这是我的工作样本。

<ul data-bind='foreach: frameworks'>
    <li>
        <button class='btn' value='pick me'             
            data-bind='text: name, click: $parent.selectFramework'>            
        </button>
    </li>
</ul>
<input type='text' data-bind='value: selectedFramework().name' />
<pre data-bind='text: ko.toJSON($root.selectedFramework, null, 4)'>
</pre>



var Framework = {
    name: ''
};

var App = new function () {
        var self = this;
        self.frameworks = ko.observableArray();
        self.selectFramework = function (item) {
            self.selectedFramework(item);
        };
        self.selectedFramework = ko.observable(Framework);
    };

App.frameworks([{name: 'foo'}, {name: 'bar'}]);

ko.applyBindings(App);

Answer 1

该值仅存储在您的 selectedFramework observable 中，因此您可以通过 App.selectedFramework() 访问它。observable 不接受任何变量并使其可观察，它将存储您在内部传递的任何值。如果要更新外部框架变量，可以在 selectFramework 函数中进行。

self.selectFramework = function (item) {
        self.selectedFramework(item);
        Framework = item;
    };

Answer 2

你快到了。您需要使每个框架上的“名称”属性可观察。我在这里更新了你的 JsFiddle

App.frameworks([{
    name: ko.observable('foo')
}, {
    name: ko.observable('bar')
}]);