Knockout.js如果语句问题

Question

我想检查'类型'绑定，如果他等于某个字符串，但看起来他没有执行它。

我的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语句如何解决这一问题的想法？

Answer 1

修订 - 与全视图模型

我会做，看起来像这样

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评估。更好的分离问题。

Answer 2

我认为你需要使用$父上下文绑定。尝试了这一点 -

<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/