1

彼が特定の文字列と等しい場合、「タイプ」バインディングを確認したいのですが、彼はそれを実行していないようです。

私のHTMLページ：

 <div class="socialWrapper" data-bind="foreach: facebookposts">
         <!-- ko if: {Type()==='link'}-->
         <img data-bind='attr: { src: FromPicture }'/>
         <p data-bind="text:From"></p>
         <!-- /ko -->
 </div>

私がちょうど戻ったとき：

<p data-bind="text: Type"></p>

私の出力= "文字列"

ご覧のとおり、if ステートメントに基づいて正しいオブザーバブルを取得したいと考えています。ビューモデル:

function Post(allData) {
    var profileImageUrl = "http://graph.facebook.com/" + allData.from.id + "/picture?type=large";
    this.Type = ko.observable(allData.type);
    this.From = ko.observable(allData.from.name);
    this.FromPicture = ko.observable(profileImageUrl);
    this.Created = ko.observable(allData.created_time);
    this.Comments = ko.observable(allData.comments.count);
    this.Message = "";
    this.Likes = "";
    this.LinkImage = "";
    this.LinkUrl = "";
    this.LinkName = "";
    this.LinkTitle = "";
    this.LinkDescription = "";
    this.Story = "";
    this.Photo = "";
    this.PhotoDescription = "";


    if (allData.type === 'status') {
        this.Message = ko.observable(allData.message);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'link') {
        this.Message = ko.observable(allData.message);
        this.LinkImage = ko.observable(allData.picture);
        this.LinkUrl = ko.observable(allData.link);
        this.LinkName = ko.observable(allData.name);
        this.LinkTitle = ko.observable(allData.caption);
        this.LinkDescription = ko.observable(allData.description);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'photo') {
        this.Story = ko.observable(allData.story);
        this.Photo = ko.observable(allData.picture);
        this.PhotoDescription = ko.observable(allData.description);
    }
}

    var masterViewModel = { 
        facebookposts: ko.observableArray([]),
        getFacebookObjects: function () {
            var getUrl = '/api/facebookposts?accesstoken=@Session["fb_access_token"]';
            $.ajax({
                url: getUrl,
                type: 'GET',
                dataType: 'json',
                success: function (allData) {
                    var mappedPosts = $.map(allData, function (item) {
                        return new Post(item);
                    });
                    masterViewModel.facebookposts(mappedPosts);
                },
                statuscode: {
                    401: function () {
                        console.log("Not Authorized");
                    }
                }
            });
        }
     };

$(document).ready(function () {
    ko.applyBindings(masterViewModel);
    masterViewModel.getFacebookObjects();
});

このifステートメントを修正する方法について誰かが考えましたか?

4

2 に答える 2

3

更新- ビューモデル全体

私はあなたのビューモデルでこのような計算されたオブザーバブルを作成します

function Post(allData) {
    var profileImageUrl = "http://graph.facebook.com/" + allData.from.id + "/picture?type=large";
    this.Type = ko.observable(allData.type);
    this.From = ko.observable(allData.from.name);
    this.FromPicture = ko.observable(profileImageUrl);
    this.Created = ko.observable(allData.created_time);
    this.Comments = ko.observable(allData.comments.count);
    this.Message = "";
    this.Likes = "";
    this.LinkImage = "";
    this.LinkUrl = "";
    this.LinkName = "";
    this.LinkTitle = "";
    this.LinkDescription = "";
    this.Story = "";
    this.Photo = "";
    this.PhotoDescription = "";

    var self = this;
    this.isLink = ko.computed(function() {
        return self.Type() === 'link';
    });

    if (allData.type === 'status') {
        this.Message = ko.observable(allData.message);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'link') {
        this.Message = ko.observable(allData.message);
        this.LinkImage = ko.observable(allData.picture);
        this.LinkUrl = ko.observable(allData.link);
        this.LinkName = ko.observable(allData.name);
        this.LinkTitle = ko.observable(allData.caption);
        this.LinkDescription = ko.observable(allData.description);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'photo') {
        this.Story = ko.observable(allData.story);
        this.Photo = ko.observable(allData.picture);
        this.PhotoDescription = ko.observable(allData.description);
    }
}

それから

<div class="socialWrapper" data-bind="foreach: facebookposts">
         <!-- ko if: isLink -->
         <img data-bind='attr: { src: FromPicture }'/>
         <p data-bind="text:From"></p>
         <!-- /ko -->
</div>

個人的には、ビューをできるだけきれいに保つのが好きです。つまり、javascript の評価はありません。関心のより良い分離。

于 2012-04-26T14:17:43.303 に答える
0

$parentコンテキストバインディングを使用する必要があると思います。これを試してみてください-

 <div class="socialWrapper" data-bind="foreach: facebookposts">
     <!-- ko if: $parent.Type === 'link'-->
     <img data-bind='attr: { src: FromPicture }'/>
     <p data-bind="text:From"></p>
     <!-- /ko -->
 </div>

http://jsfiddle.net/belthasar/DaN2X/

于 2012-04-26T14:27:38.510 に答える