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

次に、私の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>

バックボーンの新しいインスタンスがどのように使用される予定であるかを見逃していると思います。バックボーンを使用してSearch.js、ベースアプリをビルドSearch.Views.Productし、ビューで拡張する必要があると考えましたProductView。

したがって、私の例では、メソッドを使用して、HTML ビューrenderのデフォルトの動作と特定の動作で使用します。Search.js

いくつか試してみると、それは単なるインスタンスのように見えProductModel、特定の動作を作成せずProductViewにすべてのコードを実行する必要があります。Search.js

この方法ですべてを最新の状態に保つのが最も簡単になることは理解していますが、このアプリを別のビューや相対的な場所で使用するとどうなりますか?

私はそれが使用されるべき方法を見逃していると確信しています。

このガイドでは、html ビュー内で使用されるコードはありません。そのため、特定の状況を挿入せずにアプリ内のすべてのコードを記述する必要がありますか?

そうでない場合、html ビューの特定の状況でコードをどのように記述すればよいですか?

バックボーン アプリケーションのメソッドをオーバーライドすることは許可されていますか?

4

1 に答える 1

0

基本的に、次のようにさまざまな部分を考える必要があります。

  • テンプレートは、何をどこに表示するかを示します。それらはHTMLで書かれています
  • ビューは、ディスプレイが環境の変化 (ユーザーのクリック、データの変化) にどのように反応するかを決定します。それらはjavascriptで書かれています
  • モデルとコレクションはデータを保持し、操作を容易にします。たとえば、モデルがビューに表示されている場合、モデルのデータが変更されたときにビューを更新するように指示できます。
  • 次に、適切なモデル/コレクションを使用してビューの新しいインスタンスを作成し、それらをブラウザーに表示する JavaScript コードがあります。

Backbone を簡単に操作するためのフレームワークである Marionette.js に関する本を書いています。最初の章は無料サンプルで入手でき、上記の点をより詳しく説明しています: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf

于 2013-05-28T07:32:36.840 に答える