knockout.js - Knockout Viewmodel advice (multiple binding failure)

Question

I have some things I need to store as observables in my app. I've tried creating separate veiwmodels but when I bind them it clears the others. So I'm just going to post what my basic data layout is and see if anyone is willing to suggest a way to define the viewmodels...

• Search Results
  • Result Name
  • Result Type
• Items
  • Item Name
  • Type
  • properties
    • Property Name
    • Property Value
• More?

The biggest trick is that I'm trying to bind each item to a dynamically created element like so:

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

I'm trying to use something like this: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html but from what I gather it's better to define your view models as functions, so that's what I'm doing and I'm not sure where to go from here.

Here is a nonfunctional fiddle of everything I have so far: http://jsfiddle.net/MDNAJ/

Again, it lists all the results and you can click a result and get a popup with the correct info, but the search results disappear.

Answer 1

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

您的项目将有一个 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();
//});