Question

我要做的是将一个textarea的每一行作为Select的一个选项，为了达到这个目的，我已经计算了带有读写选项的绑定，当调试时（firebug）模型完成并完美更新但是修改或删除选项时，html（select）不会更新。 http://jsfiddle.net/SuperJohn/H9XYY/

HTML：

<select data-bind="options: items, optionsText: 'description'"></select>
<br />
<textarea id="options" data-bind="value: opts"></textarea>

JavaScript的：

var viewModel = function ()
{
    var self = this;
    self.items = ko.observableArray([
        {"description": "First Option"},
    {"description": "Second Option"}
    ]),

    self.opts = ko.computed({
        read: function (){
        var spVals = "";
        for (var i = 0; i < self.items().length; i++)
            spVals += self.items()[i].description + '\n';
        return spVals;
    },
    write: function (taValue) {
        var spVals = taValue.split("\n");
        var len = (spVals.length > self.items().length) ? self.items().length : spVals.length;
        for (var i = 0; i < len; i++)
            self.items()[i].description = spVals[i];
        if (spVals.length > len){
            for (var i = len; i < spVals.length; i++)
                self.items.push({"description": spVals[i]});
        };      
    },
        owner: this
    })

    };
ko.applyBindings(viewModel);

Answer 1

您只需将description属性更改为ko.observable属性即可使代码正常工作：

self.items = ko.observableArray([
    {"description": ko.observable("First Option")},
    {"description": ko.observable("Second Option")}
]),

当然，你需要在这里和那里推出一些()以使其完全正常运行，但这里是your JSFiddle的固定版本。

要进行删除工作，您可以在self.opts清理空白项目中进行清理：

self.items.remove(function (item) { 
    return !item.description();
});

演示JSFiddle。

多行textarea绑定到选择

1 个答案: