Question

我的计算变量存在问题，应该绑定到“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);部分，某些映射是否发生，还是代码的其他部分。

Answer 1

您只需要在FileName计算中使用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);  
   });
},

在映射期间使用外部函数计算knockout变量

1 个答案: