1

I am using the following example in HTML/Knockout to show my students the differences in implementation between various javascript data binding libraries. I have already created one in Angular.js and Knockout.js. Now I need this same page converted into a simple Backbone.js example. I only know Knockout.js. I was able to create the Angular.js example in 20 minutes but I'm having trouble finding the help I need to convert this into a Backbone.js example.

All it does is display three input boxes with a string and the same string following afterwards. When I change the string in the input box the text following it will update as well - as I type:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Minimum Example</title>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>

        <script>
            var items = [
                { "description": ko.observable("coffee pot") },
                { "description": ko.observable("nerf gun") },
                { "description": ko.observable("phone") }
            ];
        </script>
    </head>

    <body>
        <h1>KnockoutJS</h1>

        <div>
            <p>Stuff on my desk:</p>
            <ul data-bind="foreach: items">
                <li>
                    <input data-bind="value: description, valueUpdate: 'afterkeydown'" /><span data-bind="text: description" />
                </li>
            </ul>
        </div>

        <script>
            ko.applyBindings(items);
        </script>

    </body>
</html>

Thank you in advance!

4

2 回答 2

0

From the Backbone.js website,

"Two way data-binding" is avoided. While it certainly makes for a nifty demo, and works for the most basic CRUD, it doesn't tend to be terribly useful in your real-world app. Sometimes you want to update on every keypress, sometimes on blur, sometimes when the panel is closed, and sometimes when the "save" button is clicked. In almost all cases, simply serializing the form to JSON is faster and easier

Now this article shows how to get and set data-bindings using backbone but the downside is that it's not as simple as knockout and angular.

于 2013-06-12T12:50:27.887 回答
0

For a demo, here is an idea (not tested).

Model:

var my_model = Backbone.Model.extend({
    initialize: function(){
          this.on('change', model_changed);
    },
    model_changed: function(m){
              // assuming the input box name is the same as attribute name
              var changed_key = _.keys(m.changed)[0];
              var changed_value = _.values(m.changed)[0]; // or just use get

              /* may need to additional logic for numbers */
              if($("#"+changed_key).val() != changed_value) {
                  $("#"+changed_key).val(changed_value);
              }
    }
});

View:

var my_view = Backbone.View.extend({
    events: function(){
          "change input": "update_model",
    },
    initialize: function(){
          // init code
    },
    render: function(){
          // render code
    }
    update_model: function(e /* event */){
           this.model.set(e.currentTarget.name, $(e.currentTarget).val());
    }
});

After the view is rendered and values get updated in input elements, update_model gets fired which will set the attribute value in the model.

If the model is updated by a function or through console then it will update the input on the form if the value is not same.

于 2013-06-12T18:49:05.823 回答