3

私はBackbone.jsを初めて使用しますが、JS開発の「標準」モデルから抜け出した人は、モデルの操作方法（またはいつ）が少しわかりません。

ビューは、ほとんどのJS開発者が精通している典型的な「イベントをリッスンして何かを実行する」メソッドをエミュレートするため、非常に明白に見えます。

私は単純なTodoリストアプリを作成しましたが、これまでのところそのmodel側面の必要性を認識していないので、誰かがこのアプリケーションにそれをどのように適用するかについての洞察を私に与えることができるかどうか、またはそれが関係するものであるかどうかに興味がありますより複雑なデータを使用していた場合。

これがJSです：

Todos = (function(){

    var TodoModel = Backbone.Model.extend({

      defaults: {
          content: null
      }

    });

    var TodoView = Backbone.View.extend({

      el: $('#todos'),
      newitem: $('#new-item input'),
      noitems: $('#no-items'),

      initialize: function(){
        this.el = $(this.el);
      },

      events: {
        'submit #new-item': 'addItem',
        'click .remove-item': 'removeItem'
      },

      template: $('#item-template').html(),

      addItem: function(e) {
        e.preventDefault();
        this.noitems.remove();
        var templ = _.template(this.template);
        this.el.append(templ({content: this.newitem.val()}));
        this.newitem.val('').focus();
        return this;
      },

      removeItem: function(e){
        $(e.target).parent('.item-wrap').remove();
      }

  });

  self = {};
  self.start = function(){
    new TodoView();
  };
  return self;

});

$(function(){

    new Todos(jQuery).start();

});

ここで実行されているもの：http ：//sandbox.fluidbyte.org/bb-todo

4

3 に答える 3

3

サーバーへの変更を永続化する必要がある場合は、モデルとコレクションが必要です。

例：

var todo = new TodoModel();

新しいモデルを作成します。変更を保存して保存する必要がある場合は、

todo.save();

成功とエラーのコールバックを渡して保存することもできます。Saveは、jQueryによって提供されるajax関数のラッパーです。

アプリでモデルを使用する方法。

モデルにURLフィールドを追加します

var TodoModel = Backbone.Model.extend({

  defaults: {
      content: null
  },
  url: {
      "http://localhost";  
  }

});

モデルを作成して保存します。

addItem: function(e) {
        e.preventDefault();
        this.noitems.remove();
        var templ = _.template(this.template);
        this.el.append(templ({content: this.newitem.val()}));
        this.newitem.val('').focus();
        var todo = new TodoModel({'content':this.newitem.val()});
        todo.save();
        return this;
      },

サーバーが実行されていることを確認し、URLが正しく設定されていることを確認してください。

学習リソース：

  • バックボーンの注釈付きソースコードをチェックして、舞台裏で物事がどのように機能するかについての優れた説明を確認してください。
  • このQuoraの質問には、多くの優れたリソースとサンプルアプリへのリンクがあります。
于 2012-10-25T13:25:07.060 に答える
2

変更を永続化するためだけに必要なという考えにmodelは同意しません (サーバーだけでなく、LocalStorage をここに含めています)。

ビューだけでなく、操作するオブジェクトがあるように、モデルとコレクションの表現があると便利です。あなたの例では、ページから div (html) を追加および削除するだけです。これは、jQuery で通常実行できることです。「追加」を行うたびModelに作成して追加し、Collectionクリアするときに削除することで、並べ替え (アルファベット順) やフィルタリング (「完全」の概念を実装したい場合) などの便利なことができます。 -行う）。

あなたのコードでは、例えば：

var TodoModel = Backbone.Model.extend({
    defaults: {
        content: null
        complete: false
    }
});

var Todos = Backbone.Collection.extend({
    model: TodoModel
})

ビュー内 (無関係なコードはスキップされます):

// snip....
addItem: function(e) {
    e.preventDefault();
    this.noitems.remove();
    var templ = _.template(this.template);
    var newTodo = new TodoModel({ content: this.newitem.val() });
    this.collection.add(newTodo); // you get the collection property from free from the initializer in Backbone
    this.el.append(templ({model: newTodo})); // change the template here of course to use model
    this.newitem.val('').focus();
    return this;
},

次のように初期化します。

self.start = function(){
    new TodoView(new Todos());
};

これでバッキング コレクションが作成され、フィルタリングなど、あらゆる種類の操作を実行できます。完了した todo をフィルター処理するためのボタンがあるとします。このハンドラーをフックします。

_filterDone: function (ev) {
    filtered = this.collection.where({ complete: true });
    this.el.html(''); // empty the collection container, I used "el" but you know where you are rendering your todos
    _.each(filtered, function (todo) {
        this.el.append(templ({model: todo})); // it's as easy as that! :)
    });
}

内部ビューにフックされたイベントがある場合、コンテナーを空にすることはおそらく最善ではないことに注意してください。ただし、スターターとしてはこれで問題ありません。

todo の完了を設定するためのフックが必要になる場合があります。ボタンまたはチェックボックスを作成し、おそらく次のような関数を作成します。

_setDone: function (ev) {
    // you will need to scope properly or "this" here will refer to the element clicked!
    todo = this.collection.get($(ev.currentTarget).attr('todo_id')); // if you had the accuracy to put the id of the todo somewhere within the template
    todo.set('complete', true);
    // some code here to re-render the list
    // or remove the todo single view and re-render it
    // in the simplest for just redrawr everything
    this.el.html('');
    _.each(this.collection, function (todo) {
        this.el.append(templ({model: todo}));
    });
}

上記のコードは、モデルとコレクションがなければそれほど簡単ではありませんでした。ご覧のとおり、サーバーとはまったく関係がありません。

于 2012-10-25T16:32:43.860 に答える
2

このモデルは、サーバー側に何かを保存したい場合に役立ちます。Backbone のモデルは、RESTful エンドポイントを中心に構築されています。たとえば、URL ルートを設定しlistsてリスト情報をモデルに保存すると、モデルsaveとメソッドを使用して、エンドポイントfetchでサーバーとの間でモードを説明する JSON を保存/受信できます。lists/<id>いいえ:

   ToDoListModel = Backbone.model.extend( {
         urlRoot : "lists/" } );

   // Once saved, lives at lists/5
   list = new ToDoListModel({id: 5, list: ["Take out trash", "Feed Dog"] });
   list.save();

したがって、これを使用して、RESTful インターフェースを介してサーバー上に保持されるデータを操作できます。詳細については、このチュートリアルを参照してください。

于 2012-10-25T13:20:11.373 に答える