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関数にすぎません。これは問題だと思います。これにより、「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");
            }
        });

    })

この場合 (外部関数を使用しない場合)、エラーが発生します: バインディングを解析できません。...(無名関数)。

attachementListModel.attachements(data);したがって、問題がマッピングが発生する部分にあるのか、コードの他の部分にあるのかはわかりません。

4

1 に答える 1

1

計算されたFileNameオブザーバブルをアンラップするだけです：self.FileName()ImagePath

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

ただし、を設定する前に が呼び出されるfileName可能性がありundefiniedます。getFileTypeFileName

getFileType実際に使用するときにのみ呼び出されるように、計算された遅延を作成できますImagePath。

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

そして、attachementListModel.attachements(data);マッピングがないという2番目の問題は自動的に発生します。これは手動で行うか、マッピング プラグインを使用する必要があります。

手動で行うには、次のようなものが必要です。

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 に答える