Question

我一直在解决这个问题：Knockoutjs bind model to template created with ko.renderTemplate

我在上面的问题中给小提琴添加了一个功能，并在其中一个数据属性中添加了一个函数，以向我展示我可以拥有一个函数而不是硬编码数据。这是小提琴：

http://jsfiddle.net/stevedavey/22w7o5a3/

这是vm数据结构的深度简化版本

data: { 
        tasks: [ { 
                  taskId: 1, 
                  taskName: 'Renew Widget' 
                  parts: [ { 
                             genericPartId: 1, 
                             genericPartName: 'Widget',
                             partOptions:[{ 
                                            optionId: 1
                                            manufacturerNo: 'AD12',
                                            cost: 100
                                          },
                                          { 
                                            optionId: 2
                                            manufacturerNo: 'LY77',
                                            cost: 75
                                          },
                                          { 
                                            optionId: 3
                                            manufacturerNo: 'F8UI',
                                            cost: 135
                                          }
                                         ]
                           }
                         ] 
                 } 
               ]  
       }

因此，在我的主页面中，列出了下面列表部分的任务列表。如果每个零件具有多个零件选项，则每个零件都有一个锚点，单击该零件时应显示一个显示零件选项的模态。

实际上，部分选项的检索成本很高，所以我想在点击的一部分进行ajax调用以填充partOptions observable。这将导致显示模态。但是，使用RPN实现模态自定义绑定比使响应单击以进行ajax调用更复杂。我现在已经添加了RPN建议的onDemandObservable实现，它应该有助于异步性。代码如下所示：

ko.onDemandObservable = function (callback, target) {
var _value = ko.observable();  //private observable

var result = ko.computed({
    read: function () {
        //if it has not been loaded, execute the supplied function
        if (!result.loaded()) {
            callback.call(target);
        }
        //always return the current value
        return _value();
    },
    write: function (newValue) {
        //indicate that the value is now loaded and set it
        result.loaded(true);
        _value(newValue);
    },
    deferEvaluation: true  //do not evaluate immediately when created
});

//expose the current state, which can be bound against
result.loaded = ko.observable();
//load it again
result.refresh = function () {
    result.loaded(false);
};

return result;

};

这是我在我的虚拟机中获得的ko映射代码的片段：

                    "potentialParts": {
                        create: function (partItem) {
                            var part = ko.mapping.fromJS(partItem.data);
                            part.isOilPart = ko.computed(function () {
                                var OIL_GENART1 = 3224;
                                var OIL_GENART2 = 1862;
                                return part.partNo() === "|PPL|" && (part.genArtNumber() === OIL_GENART1 || part.genArtNumber() === OIL_GENART2);
                            });

                            part.data = ko.onDemandObservable(self.getPartsSelectorData, part);

                            part.modalTemplateName = ko.observable("PartSelectorDialogTemplate");

                            return part;
                        }
                    }

这是getPartSelectorData代码：

    self.getPartsSelectorData = function() {
    var that = this;

    var url = "/Worksheet/GetPotentialPartSelectorData?partId=" + that.partID() + "&quoteItemOrdinalId=" + that.quoteItemOrdinalId();

    $.ajax({
        url: url,
        type: "GET",
        dataType: "JSON",
        success: function (result) {
            that.data(ko.mapping.fromJS(result.data));
        },
        error: function () {                
        }
    });
}

更新：修复了That.data属性的更新。在模态自定义绑定处理程序的更新中，有可用的实际数据。

模态背景现在显示但我没有看到任何模态内容。我怀疑我的模板没有被渲染。我模板很朦胧，所以我可能搞砸了那些东西。

Knockout - 将动态ajax数据绑定到bootstrap模式 - 更新

0 个答案: