1

我正在尝试使用骨干，但我错过了它的基本概念，因为这是我第一次JavaScript MVVM Framework尝试。

我已经查看了一些指南，但我认为我仍然错过了应该如何使用它。

我将展示我的应用以获得一些方向：

// 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...

然后在我的网络应用程序视图中：

<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我应该使用 Backbone 构建基础应用程序Search.Views.Product，并根据ProductView.

因此，在我的示例中，使用render方法，将其与Search.js我的 html 视图中的默认行为和特定行为一起使用。

经过一番尝试，它似乎只是实例，您必须在不创建特定行为的情况下完成所有ProductModel代码。ProductViewSearch.js

我知道这样做可以使所有内容最容易保持最新状态，但是如果我在不同的视图和相关位置使用此应用程序怎么办？

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

在本指南中，没有在 html 视图中使用代码，所以我应该在应用程序中编写所有代码而不插入特定情况吗？

如果没有，我应该如何针对html视图的特定情况编写代码？

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

4

1 回答 1

0

基本上，您应该像这样考虑不同的部分：

  • 模板指示应显示的内容和位置。它们是用 HTML 编写的
  • 视图决定了显示器应该如何响应环境的变化（用户点击、数据变化）。它们是用 javascript 编写的
  • 模型和集合保存数据并使其更易于使用。例如，如果模型显示在视图中，您可以告诉视图在模型的数据更改时刷新
  • 然后，您有 javascript 代码将使用正确的模型/集合创建新的视图实例并在浏览器中显示它们

我正在写一本关于 Marionette.js 的书，这是一个让 Backbone 的工作变得更容易的框架。前几章以免费示例的形式提供，并更详细地解释了上述几点：http: //samples.leanpub.com/marionette-gentle-introduction-sample.pdf

于 2013-05-28T07:32:36.840 回答