backbone.js可以'在脚本中找不到错误

backbone.js Can't find error in script

本文关键字：脚本 找不到 错误 js 可以 backbone      更新时间：2023-09-26

我是javascript和backbone.js的新手我想创建一个简单的网页，有10个正方形的形式，将采取正方形id和颜色。

因此，在CSS中，每个方块都必须有自己的风格。

我试着用10个模板制作它。但脚本根本不起作用。

这是我的代码：

alert("script entry");
$(function () {

blocks = [
            {number: "1", state: "block1" },
            {number: "2", state: "block2" },
            {number: "3", state: "block3" },
            {number: "4", state: "block4" },
            {number: "5", state: "block5" },
            {number: "6", state: "block6" },
            {number: "7", state: "block7" },
            {number: "8", state: "block8" },
            {number: "9", state: "block9" },
            {number: "10", state: "block10" },
];
var BlockModel = Backbone.Model.extend({ 
    defaults:{
        "state": "block1",
        "number": "1"
    }
});
var BlockCollection = Backbone.Collection.extend({ 
    model: BlockModel,
});
var blockNumbers = new BlockCollection([  
           model:BlockModel
            ]);
var BlockView = Backbone.View.extend({
    tagName: "blockTag",
    className: "blockClass",
    templates: { 
        "block1": _.template($('#block1').html()),
        "block2": _.template($('#block2').html()),
        "block3": _.template($('#block3').html()),
        "block4": _.template($('#block4').html()),
        "block5": _.template($('#block5').html()),
        "block6": _.template($('#block6').html()),
        "block7": _.template($('#block7').html()),
        "block8": _.template($('#block8').html()),
        "block9": _.template($('#block9').html()),
        "block10": _.template($('#block10').html())
    },
    render: function () {
        var state= this.model.get("state");  
        var tmpl = this.templates(state); 
        $(this.el).html(tmpl(this.model.toJSON())); 
        return this;
    }
});

var appView = Backbone.View.extend({
    el: $("#block"), //большой контейнер
    initialize: function(){
        this.collection = new blockNumbers(blocks);
        this.render();
    },
    render: function(){ 
         _.each(this.collection.models, function () {
            that.renderBlock(this.model);
        }, this);
    },
     renderBlock: function (inputModel) {
        var blockView = new BlockView({
            {model: inputModel}
        });
        this.$el.append(blockView.render().el);
    }

}); 
var app = new appView();

});

我的错误在哪里？我的index.html:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>TEST</title>
   <link rel="stylesheet" type="text/css" href="style.css">

</head>
 <body>
    <div id="block"> 

<script type="text/template" id="block1">
  <div class="block1"><%=number%></div>
  <div class="buttonplace">
        <input type="button" value="check" />
  </div>
</script>
<script type="text/template" id="block2">
   <div class="block2"><%=number%></div>
</script>
<script type="text/template" id="block3">
  <div class="block3">3</div>
</script>
<script type="text/template" id="block4">
  <div class="block4">4</div>
</script>
<script type="text/template" id="block5">
  <div class="block5">5</div>
</script>
<script type="text/template" id="block6">
  <div class="block6">6</div>
</script>
<script type="text/template" id="block7">
  <div class="block7">7</div>
</script>
<script type="text/template" id="block8">
  <div class="block8">8</div>
</script>
<script type="text/template" id="block9">
  <div class="block9">9</div>
</script>
<script type="text/template" id="block10">
  <div class="block10">10</div>
</script>

</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="script.js"></script>

</body>
</html>

您的代码有几个问题，主要是在某些情况下使用了括号而不是括号[和大括号{。您还有一些额外的尾随逗号。此外，在HTML中，块div的结束标记应该在所有脚本模板之前。

例如

var blockNumbers = new BlockCollection([  
           model:BlockModel
            ]);

应该是

var blockNumbers = new BlockCollection({  
           model:BlockModel
       });

和

var tmpl = this.templates(state);

应该是

 var tmpl = this.templates[state];

此外，在您的appView中，您正在尝试实例化实例的新实例

this.collection = new blockNumbers(blocks);

虽然你可能想做

this.collection = new BlockNumbers(blocks);

这是一个正在工作的jsBin

除了你的模板有很多重复之外，你真的可以把它们整合成一个或两个模板。

例如，你可以只为有按钮的块和没有按钮的块提供一个模板，并相应地更新块状态

  <script type="text/template" id="blockWithButton">
  <div class="block<%=number%>"><%=number%></div>
  <div class="buttonplace">
        <input type="button" value="check" />
  </div>
  </script>
  <script type="text/template" id="blockWithoutButton">
  <div class="block<%=number%>"><%=number%></div>
  </script>

另一个jsbin

templates: { 
    "block1": _.template($('#block1').html()),
    ...         
    "block10": _.template($('#block10').html())
},

您已经在上面定义了一个对象。

var tmpl = this.templates(state);

但你把它称为一个函数。

您可以获得this.templates[state]; 模板

更新

我认为你可以使用与相同的模板

<script type="text/template" id="block">
    <div class="block<%=number%>"><%=number%></div>
    <div class="buttonplace">
        <input type="button" value="check" />
  </div>
</script>

你也可以把你的模特打扮成这样。

当然，如果你需要的话。

更新

您可以使用单个{}中的一些选项来new集合，但不能使用[]或多个{}，如以下所示：

var blockNumbers = new BlockCollection({  
    model:BlockModel
});
...
var blockView = new BlockView({
   model: inputModel
});

不是：

var blockNumbers = new BlockCollection([  
    model:BlockModel
]);
...
var blockView = new BlockView({
   {model: inputModel}
});

更新

blockNumbers是Collection的一个实例，您不能通过new为其获取数据，例如：

this.collection = new blockNumbers(blocks);

您应该将bolckNumbers分配给this.collection，并给它一个url，然后调用sync()或fetch()来获取数据，然后渲染它。

结束

最后，我发现上面的基础知识有太多错误，Backbone.js很简单但很难，你应该能够自己解决它，它对你很有用。

谢谢。

相关文章：