backbone.js使用模型中的信息查看id标记

时间:2012-03-10 15:41:56

标签: backbone.js

我正在使用backbone.js,

我有一个格式如下的模型:

{
  username:"name",
  id:"1",
  picture:"image.jpg"
}

我希望有这样的观点:

<div id="1">
    <span class="name">name<span>
    <img src="image.jpg" />
</div>

来自此模板:

<script type="text/template" id="users-template">
    <span class="name"><%= username %></span>
    <img src="<%= image %>" />      
</script>

但是当我将用户ID放入views id属性时,我会陷入困境。

UserView = Backbone.View.extend({

    id: this.model.id, //this is what I have tried but it doesnt work

    initialize: function(){
        this.template = _.template($('#users-template').html());
    },

    render: function(){
        ...
    }
})

有谁知道如何将当前模型id放入id属性?

3 个答案:

答案 0 :(得分:5)

我用那个

id : function () { 
    return this.model.get("id");
}

U只能使用".get()"

获取模型的数据
  

如果要等到将值定义到运行时,也可以将tagName,id,className,el和events等属性定义为函数。 @from Backbonejs.org

答案 1 :(得分:3)

首先,您的模型有picture,但您的模板使用image,它们应该相同,否则您的模板会出现“遗失变量”错误。

视图上的id属性应该是现有元素的DOM id; Backbone不会将其添加到el,Backbone使用它来查找 el。此外,this执行id: this.model.id时不会是一个视图(this可能是window或其他一些无用的东西)而且model属性不是无论如何都要设置直到视图被实例化。

view's el is

  

根据视图的tagNameclassNameid和属性属性创建(如果已指定)。如果没有, el 为空div

请从视图中删除id,然后使用<div>的默认el。然后,在render方法中,您可以在id上设置this.el属性;此外,使用数字id属性会导致某些浏览器出现问题,因此您通常应在id前面加上非数字的前缀:

render: function() {
    this.el.id = 'v' + this.model.get('id');
    this.$el.append(this.template(this.model.toJSON()));
    return this;
}

演示:http://jsfiddle.net/ambiguous/ZBE5z/

在运行演示时打开控制台,您将能够在视图this.el中看到最终的HTML。

答案 2 :(得分:0)

这是因为最初执行JavaScript时未设置模型。试试这个:

initialize: function(){
    this.id = this.model.id;
    this.template = _.template($('#users-template').html());
},