1

我对应该绑定到“ src”属性的计算变量有疑问。

这是html：

<ul data-bind="template: { name: 'attachements-template', foreach: attachements }">
    </ul>

    <script type="text/html" id="attachements-template">
        <li>
            <span data-bind="text: FileName"></span>
            <img class="file-type-icon" data-bind="attr:{src: ImagePath}"/>
        </li>
    </script>

这是模型：

var Attachement = function () {
    var self = this;

    this.Id = ko.observable();
    this.FileName = ko.observable();        
    self.ImagePath = ko.computed(function () {
        return "images/" + getFileType(self.FileName);
    });
};

var AttachementListModel = function () {
    var self = this;
    self.attachements = ko.observableArray([new Attachement()]);
    ...
};

getFileType只是一些 js 函数，它返回一些字符串，如“image”或“document”：我相信这是一个问题，这给了我“Uncaught TypeError: Object function observable() ...”

是否可以通过外部函数计算变量？

但是，没有这个功能我也有问题。

    self.ImagePath = ko.computed(function () {
        return "images/" + self.FileName;
    });

这是我将数据加载到的方式attachementListModel.attachements：

 $(document).ready(function () {
        attachementListModel = new AttachementListModel();
        ko.applyBindings(attachementListModel, document.getElementById("@uniqueAttachementsPanelId"));

        // get all attachements for given business entity data
        $.ajax({
            url: "/api/attachement",
            contentType: "text/json",
            dataType: "json",
            type: "GET",
            data: { businessEntityType: "type", id: 1 },
            success: function (data) {
                attachementListModel.attachements(data);  
            },
            error: function (data) {
                alert("Error");
            }
        });

    })

在这种情况下（没有外部函数） t 给出错误：无法解析绑定。...（匿名函数）。

所以，我不知道问题出在attachementListModel.attachements(data);部分、发生映射的位置，还是我的代码的其他部分。

4

1 回答 1

1

你只需要在你的计算中解开你的FileNameobservable ：self.FileName()ImagePath

self.ImagePath = ko.computed(function () {
    return "images/" + getFileType(self.FileName());
});

但是，您fileName可能是undefinied因为getFileType在设置FileName.

您可以使您的计算延迟，因此它只会getFileType在您实际使用时调用您ImagePath：

self.ImagePath = ko.computed(
    function () { return "images/" + getFileType(self.FileName()); } , 
    self, 
    { deferEvaluation: true }
);

你的第二个问题attachementListModel.attachements(data);是没有映射会自动发生。您需要手动或使用映射插件。

要手动执行此操作，您将需要以下内容：

success: function (data) {
   ko.utils.arrayMap(data, function(item) {
       var attachment = new Attachement();
       attachment.Id(item.Id);
       attachment.FileName(item.FileName);
       attachementListModel.attachements.push(attachment);  
   });
},
于 2013-11-06T10:55:37.237 回答