【问题标题】:Knockout mapping plugin not creating observable properties淘汰赛映射插件不创建可观察的属性
【发布时间】:2012-08-07 16:57:31
【问题描述】:

我有一个关于使用敲除映射插件的问题。

我正在从服务器获取一个简单的数组,并使用映射插件将其转换为 javascript 对象。由于我希望项目上的属性是可观察的,因此我为 pugin 提供了用于创建回调的自定义映射。

    var meeting = function (id, titel, description) {
        var self = this;
        self.Id = id;
        self.Titel = ko.observable(titel);
        self.Description = ko.observable(description);
        self.Test = ko.computed(function () { return self.Description(); });
        return self;
    }

    var mapping = {
        create: function (json) {
            return new meeting(json.data.Id, json.data.Titel, json.data.Description);
        }
    }

当我调用 ko.mapping.fromJS(myFetchedData) 时,我看到(附加了调试器)为我的数组中的每个项目调用了 create-function。一切都很好地绑定到 HTML 控件。我看到数组中的每个项目都出现了一个 li 项目。

<ul id="meetings" data-bind=" foreach: meetings">
    <li class="ui-widget-content ui-corner-all">
        <h1 data-bind="text: Titel" class="ui-widget-header"></h1>
        <div>
            <input type="text" data-bind="text: $data.Description || 'Omschrijving?'"></input>,
        </div>
        <div>
            <input type="text" data-bind="text: $data.Test || 'Omschrijving?'"></input>,
        </div>
        <a href="#" data-bind="click: $root.updateMeeting" >Update</a>
        <a href="#" data-bind="click: $root.removeMeeting" >Remove</a></p>
    </li>
</ul>

但是:Description 属性似乎不是 Observable。更改值不会导致测试计算属性的值更新。

我错过了什么吗?

任何帮助将不胜感激。

完整的示例代码可以在这里找到: http://jsfiddle.net/dtiemstra/wRg88/

【问题讨论】:

    标签: knockout.js knockout-mapping-plugin knockout-2.0


    【解决方案1】:

    您需要绑定到 &lt;input&gt; 控件的 value 属性 - 而不是它的 text 属性。

    所以而不是:

    <input type="text" data-bind="text: $data.Description || 'Omschrijving?'"></input>
    

    你应该写:

    <input type="text" data-bind="value: $data.Description || 'Omschrijving?'"></input>
    

    http://jsfiddle.net/wRg88/8/

    【讨论】:

    • 别担心。那是每个淘汰赛开发人员在某些时候犯的前 10 个错误! :-)
    猜你喜欢
    • 2017-08-11
    • 1970-01-01
    • 2013-03-12
    • 1970-01-01
    • 1970-01-01
    • 2012-12-02
    • 2014-11-05
    • 2012-09-08
    • 2012-07-07
    相关资源
    最近更新 更多