Question

我需要将一些东西存储为我的应用中的可观察对象。我尝试过创建单独的veiwmodel但是当我绑定它们时它会清除其他的。所以我只是发布我的基本数据布局，看看是否有人愿意建议一种方法来定义视图模型......

搜索结果
- 结果名称
- 结果类型
产品
- 项目名称
- 类型
- 属性
  - 物业名称
  - 物业价值
更多？

最大的诀窍是我正在尝试将每个项目绑定到动态创建的元素，如下所示：

    $("<div/>", {                                                       //create new div
        class: "itemView",                                              //add css class
        id: name,                                                       //set ID to item name (may change to array location later?)
        "data-bind": "template: { name: 'tmplItemView' }"
    }).appendTo("body").draggable();                                    //append to the body and make it draggable
    items[numItems] = new item();
    ko.applyBindings(items[numItems], 
        document.getElementById('#' + name));

我正在尝试使用这样的东西：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html但是从我收集的内容来看，最好将视图模型定义为函数，这就是我正在做的事情，我不确定从哪里开始这里。

这是我到目前为止所有事情的无功能小提琴：http://jsfiddle.net/MDNAJ/

同样，它会列出所有结果，您可以点击结果并获得包含正确信息的弹出窗口，但搜索结果会消失。

Answer 1

我认为你在View Models概念中缺少的一件事是对象模型。如果创建对象模型，则可以在View模型中使用它。有点像开始编程课程，你如何在你的Main中使用一个类做一些奇特的东西（又名“面向对象编程”）。

你的物品将有一个ItemModel，它会是这样的（注意OBJECT MODEL评论）：

//namespace myProj
var myProj = myProj || {};
var myProjViewModel = {};

myProj.PageComponent = (function ($, ko) {
    //OBJECT MODEL
    function ItemsModel(data) {
        var self = this;
        if (data === undefined) {
            data = {}; //protect the data by creating an empty object
        }
        self.name = ko.observable(data.name || "");
        self.type = data.parts || "";
        self.properties = ko.observableArray(data.properties || []);
    }
    //END OBJECT MODEL

    //KNOCKOUT VIEW-MODEL
    function PageVM(data) {
        var self = this;

        if (data === undefined) {
            data = {}; //protect the data by creating an empty object
        }
        self.searchBy = ko.observable("");
        self.resultName = ko.observable("");
        self.resultType = ko.observable("");
        self.itemsList = ko.observableArray([]);

        self.searchItem = function () {
            //ask server for items
            $.ajax({
                url: '/Page/SearchItems',
                type: 'POST',
                data: {
                    searchParameters: self.searchBy(); 
                    //where searchParameters is a variable required 
                    //by the SearchItems function
                    //in the Page Controller
                },
                dataType: "json",
                traditional: true,
                success: function (result) {
                    self.load(data);
                },
                error: function () {
                    alert("Error");
                }
            });

        };
        self.load = function (data) {
            //load Items into the ViewModel
            //which triggers an update for the observables

            //call jQuery map, which makes an array foreach data.items, do the function
            var mappedItems = $.map(data.Items, function (item) {
                //calling function and passing data: creating new ItemsModel, passing in the item
                return new ItemsModel(item); 
            });

            self.itemsList(mappedItems);
        };
    }
    //END KNOCKOUT VIEW-MODEL

    //PUBLIC METHODS
    var initModule = function (model) {
        //viewModel
        myProjViewModel = new PageVM(model);
        ko.applyBindings(myProjViewModel);
    }
    return {
        initModule: initModule
    };
    //END PUBLIC METHODS
})($, ko);

//put this in view
//$(document).ready(function () {
//    myProj.PageComponent.initModule();
//});

Knockout Viewmodel建议（多重绑定失败）

1 个答案: