Question

我正在使用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属性？

Answer 1

我用那个

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

U只能使用".get()"

获取模型的数据

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

Answer 2

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

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

view's el is：

根据视图的tagName，className，id和属性属性创建（如果已指定）。如果没有， 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。

Answer 3

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

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

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

3 个答案: