2011-02-04 3 views
2

Я пытаюсь связать вход, модель и элемент dom.backbone.js привязка данных

<div data-carName="Isetta"> 
    <input type="textfield" name="speed"/> 
    <br /> 
    <br /> 
    Speed: <br /> 
    <div>{speed}</div> 
</div> 

var Isetta = { 
    speed:speedval 
} 

Что мне делать, если я хочу, когда входная скорость карты изменяются, для йот элемента скорости изменения с ним, и JavaScript Object/модель для изменения, а?

Я могу сделать это легко с привязкой данных jQuery. Как это сделать с помощью backbone.js?

Спасибо.

ответ

2

Вы также можете рассмотреть возможность связывания клавиатурных событий и таймеры в поле ввода, так что, когда пользователь закончит ввод в их вводе, вы вызываете событие на модели, которая затем обновляет вид:

Если вы добавить id=name в этой области, то на ваш взгляд, вы можете добавить что-то вроде:

events: { 
    "keypress #speed" : "updateViewOnEnter" 
}, 

updateViewOnEnter: function(e) { 
    if (e.keyCode != 13) return; 
    e.preventDefault(); 
    this.model.trigger('speed:change'); 
}, 

проверить эту функцию дросселя от Remy Sharp, если вы хотите, чтобы задушить вызовы функции, как пользователь продолжает вводить в поле ввода,: http://remysharp.com/2010/07/21/throttling-function-calls/

events: { 
    "keypress #speed" : "updateViewOnDelayedKeypress" 
}, 

updateViewOnDelayedKeypress: function(e) { 
    throttle(function (e) { 
    this.model.trigger('speed:change'); 
    }, 250)); 
}, 
+0

Сразу же, с тех пор я понял это – FriiSource

+0

Я думаю, вы также можете использовать событие «change» во втором примере вместо нажатия клавиши. –

2
var Car = Backbone.Model.extend({ }); 

var CarView = Backbone.View.extend({ 
    model: Car, 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    } 
    render: function() { ... } 
} 

Модель автомобиля будет генерировать события, и CarView ответит на них. Список событий намного шире - и вы можете добавить свои собственные, если хотите, чем те, которые связаны с данными. jQuery Data-Link, по-видимому, полностью касается форм и имеет ограниченный механизм фильтрации. Это интересно, но он явно решает другую проблему из одной Backbone и других библиотек MVC.

0

Вы также можете проверить эту библиотеку: https://github.com/derickbailey/backbone.modelbinding, которая добавляет модуль, который будет обрабатывать динамические и условные привязки для вас.

+0

Derick «отказался» от проекта, связанного выше, в пользу https://github.com/theironcook/Backbone.ModelBinder и http://www.rivetsjs.com/docs/ – BishopZ

Смежные вопросы