Backbone.js：单击 U.I 列表元素可在页面的不同部分显示它们

Question

我正在 Backbone.js 做一个项目，我从食物 API 中得到结果然后显示它们。我有这个功能。我需要的下一个功能是能够从结果列表中单击一个项目并能够保存该结果，并将其显示在页面右侧的食物跟踪列表中。追踪的食物列表将显示有关食物的信息（食物名称、品牌和卡路里）以及所有追踪食物的卡路里总量。我在创建此功能时遇到问题，因为我不知道如何单击列表项并让它获取 html 列表元素中的项目信息并将其放置在页面的另一部分。

这是我的 JSfiddle link- https://jsfiddle.net/Tiquismiquis/2nLezvmg/3/

这是我的JAVASCRIPT-

$(function(){

var SearchList = Backbone.Collection.extend({

    initialize: function(){
        this.bind("reset", function(model, options){
        console.log("Inside event");
        console.log(model);
        });
    },
    //** 1. Function "parse" is a Backbone function to parse the response properly
    parse:function(response){
        //** return the array inside response, when returning the array
        //** we left to Backone populate this collection
        return response.hits;
    }

});

// The main view of the application
var App = Backbone.View.extend({

    el: 'body',

    events: {
    "input #searchBox" : "prepCollection",
    "click li" : "track"
    },

    initialize: function () {

        this.model = new SearchList();
        this.prepCollection =_.debounce(this.prepCollection, 1000);

        this.$list = $('#listing');
        // this.saved =$('#tracked');

    },

    prepCollection: function(){
        var name = $('input').val();
        var newUrl = "https://api.nutritionix.com/v1_1/search/" + name + "?results=0%3A20&cal_min=0&cal_max=50000&fields=item_name,brand_name,item_id,nf_calories&appId=26952a04&appKey=private_key";

       if (name == ""){
        this.$list.html("")
       }
       else{
        this.model.url = newUrl;
        this.model.fetch({
            success: function (response, xhr) {
                console.log("Inside success");
                console.log(response.toJSON());
            },
            error: function (errorResponse) {
                console.log(errorResponse)
            }
        });
        this.listenTo(this.model, 'sync', this.render);
       }

    },

    // track: function(){
    // },


    render: function(){
        var terms = this.model;
        var wordhtml = "";
        terms.each(function (term) {
            wordhtml = wordhtml + "<li>" +"<strong>" + term.get('fields')["item_name"] + '</strong>'+ ' ('+ term.get('fields')["brand_name"] + ')'+' - '+ term.get('fields')["nf_calories"] + ' Calories' + "</li>"
        }, this);
        this.$list.html(wordhtml);

    }
});
       var app = new App();
});

这是我的 HTML-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Food Guide App</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <h1>Interactive Food Guide</h1>
                <input type="text" id="searchBox"> <br/><br/>
                <ul id="listing"></ul>
            </div>

            <div class="col-xs-6">
                <h1>Foods Tracked</h1>
                <ul id="tracked"></ul>
                <p id="total">total calories: <span>0</span></p>
            </div>
        </div>


    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Backbone and Underscore -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
    <!-- apps functionality -->
    <script src="js/app.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

有很多方法可以做到这一点 - 通过 backbone listView 或简单地向元素添加 data-* 属性。

下面是一个演示后者的例子：

模板更改：

var liTemplate = '<li data-brand="<%-data.brand_name%>" data-name="<%-data.item_name%>"><strong><%-data.item_name%> (<%-data.brand_name%>)</strong></li>';

wordhtml = _.template(liTemplate)({ data : term.get('fields')});

视图更改：

events:{
  'click li': 'track'
},
track: function(e){
  var $target = $(e.currentTarget);
  var itemName = $target.attr('data-name');
  var brandName = $target.attr('data-brand');
  //do whatever you need
}

在 https://jsfiddle.net/nitincool4urchat/2nLezvmg/8/

找到工作 fiddle

Backbone.js：单击 U.I 列表元素可在页面的不同部分显示它们

Backbone.js: Clicking U.I list elements to show them in a different section of the page

javascript

jquery

backbone.js