Question

我正在尝试绑定我的数据以查看但我在所有尝试中都没有成功。

我会在变量中存储一个数据数组，然后使用映射插件，我将这些数据作为可观察数据将其绑定到视图。

这里有趣的是我在console中没有错误，我用

检查

<span data-bind="text: ko.toJSON(Item)"></span>

我可以看到我的阵列，但我看不到它可以查看。

脚本代码：

console.log(ko.mapping.fromJS(jsonData));
var viewModel = new MainModel();
viewModel.Item(ko.mapping.fromJS(jsonData));
ko.applyBindings(viewModel);

小提琴链接是Here。

这是我在映射插件上的第一个踪迹。请给我一个使用映射插件构建一些复杂内容的参考。

如果是，建议采用任何更好的方法。

Answer 1

我修改了你的小提琴，添加＆＃34;映射＆＃34;防御和其他一些变化（我害怕失去消息来源，因此我在这里发布）。

主要是

var mapping = {
    'Item': {
        create: function(options) {
            return new ChildModel(options.data);
        }
    }
}

其中映射插件将被强制使用某些对象创建函数，然后反序列化您的cild模型。

标记：

    <h2>Nested</h2>
<table  cellpadding="10" cellspacing="5" style="padding:10px;">
    <tbody data-bind="foreach: Item">
    <tr >
        <td>
            <select data-bind="options: $root.dropDownItem, selectedOptions: $data.SelectedOption && SelectedOption() || ''"></select>
        </td>
        <td>
            <input type="button" data-bind="click: AddValue" value="Add Value" />
        </td>
        <td>
            <table data-bind="foreach: Value">
                <tr>
                    <td><input type="text" data-bind="value: Value1" /></td>
                    <td><input type="text" data-bind="value: Value2"/></td>
                </tr>
            </table>
        </td>
    </tr>
    </tbody>
</table>
<div>
    <input type="button" value="Add Item" data-bind="click: AddItem" />
</div>
<div>
    <span data-bind="text: ko.toJSON(Item)"></span>
</div>

代码：

 $(document).ready(function () {

           var jsonData = {"Item":[{"Value":[{"Value1":"1","Value2":"2"},{"Value1":"3","Value2":"4"}]},{"SelectedOption":["Item2"],"Value":[{"Value1":"5","Value2":"6"},{"Value1":"7","Value2":"8"},{"Value1":"9","Value2":"10"}]}]};
var mapping = {
    'Item': {
        create: function(options) {
            return new ChildModel(options.data);
        }
    }
}
     var viewModel = new MainModel();
          viewModel.Item(ko.mapping.fromJS(jsonData, mapping).Item());
ko.applyBindings(viewModel);    

        });

        function ValueModel() {
            var self = this;
            self.Value1 = ko.observable();
            self.Value2 = ko.observable();
        }

        function ChildModel() {
            var self = this;
            self.SelectedOption = ko.observable();
            self.Value = ko.observableArray([new ValueModel()]);

            self.AddValue = function () {
                self.Value.push(new ValueModel());
            }
        }


        function MainModel() {
            var self = this;            
            self.Item = ko.observableArray([]);

            init();

            function init() {
                self.Item.push(new ChildModel());                
            }

            self.dropDownItem = ko.observableArray(['Item1', 'Item2', 'Item3', 'Item4']);

            self.AddItem = function () {
                self.Item.push(new ChildModel());
            }
        }

希望，这有帮助。

Answer 2

我不记得，但这与我两天前提出的问题相同。

我想如果你想要类似的一次性问题，我已经解决了它，你可以在你更新的小提琴上找到它。我还将淘汰赛版本更新为3.2.0。

http://jsfiddle.net/C46pU/9/

var mapping = {
    'Items': {
        create: function(options) {
            console.log('Inside Mapping Item');
            return new ChildModel(options.data);
        }
    },
     'Value': {
         create: function(options){
                  console.log('Inside Mapping Value');
                  return new ChildModel(options.data);
         }
       }
 };

$(document).ready(function () {

           var jsonData = {"Items":[{"Value":[{"Value1":"1","Value2":"2"},{"Value1":"3","Value2":"4"}]},{"SelectedOption":["Item2"],"Value":[{"Value1":"5","Value2":"6"},{"Value1":"7","Value2":"8"},{"Value1":"9","Value2":"10"}]}]};

         var viewModel = new MainModel(jsonData);                    
         ko.applyBindings(viewModel);                         
        });

        function ValueModel() {
            var self = this;
            self.Value1 = ko.observable();
            self.Value2 = ko.observable();
        }

        function ChildModel(data) {
            var self = this;
            self.SelectedOption = ko.observable();
            self.Value = ko.observableArray([]);
            if(data != null)
            {
                console.log(data);
                ko.mapping.fromJS(data,mapping,self);
            }
            self.AddValue = function () {
                self.Value.push(new ValueModel());
            }
        }


        function MainModel(data) {
            var self = this;            
            self.Items = ko.observableArray([]);
            if(data != null)
            {
                console.log('Inside Main Model');
                console.log(data);
                ko.mapping.fromJS(data,mapping, self);
            }           

            self.dropDownItem = ko.observableArray(['Item1', 'Item2', 'Item3', 'Item4']);

            self.AddItem = function () {
                self.Items.push(new ChildModel());
            }
        }

无法使用映射插件映射数据？昏死

2 个答案: