2013-04-08 33 views
1

我试图与骨干工作,但我失去了它的基本概念,因为这是第一次JavaScript MVVM Framework我试试。理解骨干架构的基础概念

我已经看看to some guide,但我想我还是失踪了应该如何使用。

我会告诉我的应用程序得到一些方向:

// Search.js 

var Search = { 
    Models: {}, 
    Collections: {}, 
    Views: {}, 
    Templates:{} 
}; 

Search.Models.Product = Backbone.Model.extend({ 
    defaults: search.product.defaults || {}, 
    toUrl:function (url) { 
     // an example method 
     return url.replace(" ", "-").toLowerCase(); 
    }, 
    initialize:function() { 
     console.log("initialize Search.Models.Product"); 
    } 
}); 

Search.Views.Product = Backbone.View.extend({ 
    initialize:function() { 
     console.log("initialize Search.Views.Product"); 
    }, 
    render:function (response) { 
     console.log("render Search.Views.Product"); 
     console.log(this.model.toJSON()); 
     // do default behavior here 
} 
}); 

Search.Models.Manufacturer = Backbone.Model.etc... 
Search.Views.Manufacturer = Backbone.View.etc... 

然后在我的web应用程序视图:

<head> 
<script src="js/jquery.min.js"></script> 
<script src="js/underscore.min.js"></script> 
<script src="js/backbone/backbone.min.js"></script> 
<script src="js/backbone/Search.js"></script> 
</head> 

<body> 
<script> 
var search = {}; 
search.product = {}; 
search.product.defaults = { 
    id:0, 
    container:"#search-results", 
    type:"product", 
    text:"<?php echo __('No result');?>", 
    image:"<?php echo $this->webroot;?>files/product/default.png" 
}; 

$(function(){ 
    var ProductModel = new Search.Models.Product(); 
    var ProductView = new Search.Views.Product({ 
     model:ProductModel, 
     template:$("#results-product-template"), 
     render:function (response) { 
      // do specific view behavior here if needed 
      console.log('render ProductView override Search.Views.Product'); 
     } 
    }); 
    function onServerResponse (ajax_data) { 
     // let's assume there is some callback set for onServerResponse method 
     ProductView.render(ajax_data); 
    } 
}); 
</script> 
</body> 

我觉得我缺少骨干的新实例打算如何使用,我认为与Backbone Search.js我应该建立像Search.Views.Product这样的基本应用程序,并在视图中扩展它,因为ProductView的情况。

因此,在我的示例中,使用render方法时,在Search.js中使用默认行为并在我的html视图中使用该行为。

经过一番尝试,似乎ProductModelProductView只是实例,您必须在Search.js中执行所有代码而不创建特定行为。

我明白做这样让一切最容易被不断更新,但如果我使用这个应用程序在不同的观点和相对的地方?

我确定我错过了它应该使用的方式。

this guides没有HTML视图中使用的代码,所以我应该写应用中的全部没有插入特定情况下的代码?

如果不是,我应该如何编写html视图的特定情况的代码?

是否允许覆盖我的Backbone应用程序的方法?

回答

0

基本上,你应该这样想的不同部分组成:

  • 模板指出哪些应显示在哪里。他们在HTML
  • 视图中规定显示器应该如何对环境变化(用户点击,数据更改)作出反应。它们是用javascript编写的
  • 模型和集合保存数据并使其更容易使用。例如,如果一个模型显示在一个视图中,可以告诉视图更新时模型的数据更改
  • 那么,你的JavaScript代码来创建视图的新实例与适当的模型/收集和显示它们浏览器

我正在写一本关于Marionette.js的书,这是一个使Backbone更容易工作的框架。第一章提供免费样本,并更详细地解释以上几点:http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf