Knockout.js如果语句问题
我想检查'类型'绑定,如果他等于某个字符串,但看起来他没有执行它。Knockout.js如果语句问题
我的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/[email protected]["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语句如何解决这一问题的想法?
修订 - 与全视图模型
我会做,看起来像这样
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-26 14:45:30
是的,做了这份工作,谢谢! – 2012-04-26 14:56:00
我忘了()当我第一次尝试它:) – 2012-04-26 14:58:03
我认为你需要使用$父上下文绑定。尝试了这一点 -
<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>
如果我尝试获取错误:Uncaught错误:无法解析绑定。 消息:SyntaxError:意外的令牌。 绑定值:if:{$ parent.Type()==='link'}。我也没有括号{}。 – 2012-04-26 14:35:12
我在IE或FF中看不到错误。你能提供一个facebookposts结构的例子吗? – 2012-04-26 14:42:15
我用Chrome来测试它。但它现在已经修复,感谢您的帮助! – 2012-04-26 14:58:50
如果不工作,你的意思是它似乎始终评估为真?总是假?或者它给你一些错误? – 2012-04-26 14:09:10
另外,试试Type()==='link'。可观察对象实际上是函数,您需要使用括号来调用函数并实际获取值。 – 2012-04-26 14:10:16
@Matt Burland:它总是评估为false,并且Type()==='link'不起作用。 – 2012-04-26 14:12:30