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

Question

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

• 搜索结果
  • 结果名称
  • 结果类型
• 项目
  • 项目名称
  • 类型
  • 属性
    • 属性名称
    • 财产价值
• 更多？

最大的技巧是我试图将每个项目绑定到一个动态创建的元素，如下所示：

    $("<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

我认为您的视图模型概念中缺少的一件事是对象模型。如果您创建了一个对象模型，那么您可以在您的视图模型中使用它。有点像在初级编程课程中，您如何在 Main 中使用 Class 来做一些花哨的事情（也称为“面向对象编程”）。

您的项目将有一个 ItemModel，它会是这样的（注意 OBJECT MODEL cmets）：

//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();
//});