堆栈内存溢出
  繁体   English   中英

来自AMD项目中json文件的主干绑定数据

[英]Backbone bind data from json file in AMD project

 原文  2014-10-16 13:52:59  3   2    javascript/ json/ backbone.js/ requirejs

问题描述

我是Backbone的新手，所以我尝试尝试一下。 我已基于此示例建立了一个模块化项目。 而且我还以与本教程类似的方式实现了页面之间的转换。 现在，我被困在json文件中其中一个视图中的数据绑定中。 我尝试了很多方法，但是没有运气。

这是我的代码：

我有一个“页面管理器”，它根据用户所在的页面来处理视图结构以及transitionIn和transitionOut函数： 

define([
    "backbone",
    "config-all"
], function(Backbone, Config) {
    var pagesManagerView = Backbone.View.extend({
        el: $("#page"),

        initialize: function(options) {
            var $this = this;



            this.currentPage = null;
            this.backDetected = false;
            this.transitionType = "";
            this.isFirstPageLoad = false;
            this.previousPageMapItem = null;
            this.currentPageMapItem = null;



            this.pagesMap = {
                "home": {
                    index: 0,
                    fragment: "",
                    regex: /^home$/,
                    pageId: "home"
                }, 
                "projects": {
                    index: 1,
                    fragment: "projects",
                    regex: /^projects$/,
                    pageId: "projects"
                },
                "users": {
                    index: 2,
                    fragment: "users",
                    regex: /^users$/,
                    pageId: "users"
                }
            };

            $(document).ready(function(evt) {

            });
        },

        getPageFromMapByFragment: function(fragment) {
            if (fragment === "") 
                fragment = "home";
            for (var i in this.pagesMap) {
                if (fragment.match(this.pagesMap[i].regex))
                    return this.pagesMap[i];
            }
            return this.pagesMap[fragment];
        },

        updatePageHistoryState: function() {
            var currentFragment = Backbone.history.getFragment();
            this.currentPageMapItem = this.getPageFromMapByFragment(currentFragment);
            this.backDetected = 
                this.currentPageMapItem && 
                this.previousPageMapItem && 
                this.currentPageMapItem.index < this.previousPageMapItem.index;



            this.transitionType = Config.transitions.PageTransitionType.VERTICAL;



            this.isFirstPageLoad = this.previousPageMapItem === null;
            this.previousPageMapItem = this.currentPageMapItem;
        },

        renderPage: function(pageView) {
            var $this = this;


            this.transitionType = Config.transitions.PageTransitionType.VERTICAL;

            if (this.$el.find("#page-out").length === 0)
                this.$el.append('<div id="page-out" class="page-out"></div>');

            var elIn = this.$el.find("#page-in");
            var elOut = this.$el.find("#page-out");


            if (this.currentPage) {
                var currentPageHtml = elIn.html();
                elOut.html(currentPageHtml);
                elOut.show();
                this.currentPage.$el = elOut;
                this.currentPage.transitionOut(this.transitionType, this.backDetected);

            }

            pageView.$el = elIn;
            pageView.render();
            pageView.transitionIn(this.isFirstPageLoad, this.transitionType, this.backDetected, function() {

            });
            this.currentPage = pageView;

            return true;
        }
    });

    return pagesManagerView;
});

然后是一个摘要页面，其中所有视图都共享功能，包括实际的转换功能： 

define(['backbone', 'config-all'],
    function(Backbone, Config) {
    var abstractPageView = Backbone.View.extend({
        render: function() {

        },

        transitionIn: function(isFirstPageLoad, transitionType, transitionBack, callback) {
            switch (transitionType) {
                case Config.transitions.PageTransitionType.VERTICAL:
                    this.transitionInVertical(isFirstPageLoad, transitionBack, callback);
                    break;
            }
        },

        transitionOut: function(transitionType, transitionBack, callback) {
            switch (transitionType) {
                case Config.transitions.PageTransitionType.VERTICAL:
                    this.transitionOutVertical(transitionBack, callback);
                    break;
            }
        },



        transitionInVertical: function(isFirstPageLoad, transitionBack, callback) {
            var $this = this;
            var startPosTop = transitionBack
                ? 0 - $("#page").height()
                : 0 + $("#page").height();
            if (isFirstPageLoad)
                startPosTop = 0;
            this.$el.css({
                top: startPosTop
            });
            this.$el.animate({
                top: 0
            }, {
                duration: 500,
                easing: "easeOutQuad",
                done: function() {
                    if (callback && typeof callback === "function")
                        callback();
                }
            });
        },

        transitionOutVertical: function(transitionBack, callback) {
            var $this = this;
            var endPosTop = transitionBack
                ? $("#page").height()
                : -$("#page").height();
            this.$el.animate({
                top: endPosTop
            }, {
                duration: 500,
                easing: "easeOutQuad",
                done: function() {
                    if (callback && typeof callback === "function")
                        callback();
                    // @important remove(); 
                    // this must be called upon transition out complete
                    $this.remove();
                }
            });
        }

    });

    return abstractPageView;
});

然后有一个视图： 

define([
    'jquery',
    'underscore',
    'backbone',
    'views/abstract-page',
    'views/sidebar/SidebarView',
    'text!templates/contributors/contributorsTemplate.html'
], function ($, _, Backbone, AbstractPage, SidebarView, contributorsTemplate) {

    var ContributorsView = AbstractPage.extend({
        initialize: function () {

        },

        render: function () {
            $('.menu li').removeClass('active');
            $('.menu li a[href="' + window.location.hash + '"]').parent().addClass('active');

            // render my template
            this.$el.html(contributorsTemplate);

            // add the sidebar 
            var sidebarView = new SidebarView();
            sidebarView.render();
        }

    });

    return ContributorsView;

});

目前，contributorsTemplate.html仅具有静态html，但我想绑定json文件中的某些数据。 我对如何使用模型，集合以及如何将数据绑定到模板感到非常困惑，因为模板是使用Require.js调用的，并且不知道如何将数据注入到div中。

这是我的收藏： 

define([
  'underscore',
  'backbone',
  'models/contributor/ContributorModel'
], function(_, Backbone, ContributorModel){

    var ContributorsCollection = Backbone.Collection.extend({

        model: ContributorModel,

        url: "js/data/data.json",

        initialize: function(models, options) {
        }

    });

  return ContributorsCollection;

});

和模型： 

define([
  'underscore',
  'backbone'
], function(_, Backbone) {

  var ContributorModel = Backbone.Model.extend({

    defaults : {

    }

  });

  return ContributorModel;

});

和我的json文件： 

[
    {
        "name": "Google",
        "image": "/images/logo.jpg",
        "link": "http://www.google.co.uk"
    },
    {
        "name": "Yahoo",
        "image": "/images/logo.jpg",
        "link": "http://www.yahoo.co.uk"
    },
    {
        "name": "Apple",
        "image": "/images/logo.jpg",
        "link": "http://www.apple.com"
    },
    {
        "name": "Gizmodo",
        "image": "/images/logo.jpg",
        "link": "http://www.gizmodo.co.uk"
    },
    {
        "name": "Engadget",
        "image": "/images/logo.jpg",
        "link": "http://www.engadget.com"
    },
    {
        "name": "9to5 Mac",
        "image": "/images/logo.jpg",
        "link": "http://www.9to5mac.com"
    }

]

在我看来，我真的不明白如何执行以下操作（来自“模块化骨干”示例）： 

  // Using Underscore we can compile our template with data
  var data = {};
  var compiledTemplate = _.template( projectListTemplate, data );
  // Append our compiled template to this Views "el"
  this.$el.append( compiledTemplate );

我已经尝试过但没有成功，我不知道如何使用data{} 。 抱歉，问题很长，如果我可能缺少Backbone专家可能会认识的一些简单内容。 我确实需要一些适合我的代码的示例来帮助您，为此花了好几天的时间！

提前致谢！

代码更新
试图应用CharlieBrown的答案没有运气，我敢肯定我还在做一些愚蠢的事情：

采集： 

define([
  'underscore',
  'backbone',
  'models/contributor/ContributorModel'
], function(_, Backbone, ContributorModel){

    var ContributorsCollection = Backbone.Collection.extend({

        model: ContributorModel,

        url: "js/data/data.json",

        initialize: function(models, options) {
        }

    });

  return ContributorsCollection;

});

视图： 

define([
    'jquery',
    'underscore',
    'backbone',
    'views/abstract-page',
    'views/sidebar/SidebarView',
    'collections/contributors/ContributorsCollection',
    'text!templates/contributors/contributorsTemplate.html'
], function ($, _, Backbone, AbstractPage, SidebarView, ContributorsCollection, contributorsTemplate) {

    var ContributorsView = AbstractPage.extend({
        initialize: function () {

        },

        render: function () {
            $('.menu li').removeClass('active');
            $('.menu li a[href="' + window.location.hash + '"]').parent().addClass('active');

            var contrCollection = new ContributorsCollection();
            //compile the template
            var data = {items: contrCollection.toJSON() };
            var compiledTemplate = _.template(contributorsTemplate, data);

            // render my template
            this.$el.html(compiledTemplate);

            // add the sidebar 
            var sidebarView = new SidebarView();
            sidebarView.render();
        }

    });

    return ContributorsView;

});

模板： 

<div class="main" id="contacts">    
    <h2>Contributors</h2>

        <div id="projects-list">
            <% _.each(items, function(item) { %>
                <%= item.name %>
                <%= item.image %>
                <%= item.link %>
            <% } %>
        </div>

</div>

那我在做什么错？

再次感谢

2 个解决方案

解决方案1
 0  2014-10-16 14:43:53

哇，看起来很复杂，尽管很有趣！ :)

好消息-您缺少的是简单的部分。

您正在使用requirejs文本插件从外部源加载HTML。 您只需要使用所选的模板引擎来“编译”该HTML。 您提到的示例使用基本的Underscore模板。

与其直接将HTML添加到视图的jQuery元素中，不如使用您喜欢的数据对其进行编译，然后发送结果： 

render: function () {
  $('.menu li').removeClass('active');
  $('.menu li a[href="' + window.location.hash + '"]').parent().addClass('active');

  //compile the template
  var data = { text: "Hello world!" };
  var compiledTemplate = _.template(contributorsTemplate, data);

  // render my template
  this.$el.html(compiledTemplate);

}

假设您的模板包含以下内容： 

<h1><%= text %></h1>

先前代码的结果是，模板内部的text变量将使用提供给_.template的上下文进行插值。 因此，它将显示“

你好，世界！

”。

当您使用模型和集合时，通常您的模板数据将包含模型数据（如果是集合，则包含模型列表）。

例如，假设您的视图具有如下模型： 

<h1><%= firstName %> <%= lastName %></h1>

然后，您可以直接将模型属性用作模板文件中的变量： 

 <h1><%= firstName %> <%= lastName %></h1>

这就是为什么通常您将创建基本的通用View并从中继承的原因，以避免相同的步骤：

  1. 序列化模型/集合
  2. 编译模板
  3. 输出到视图$ el

Somethig喜欢： 

var ContactView = BaseView.extend({
  template: yourRequiredTemplate
});

//in your router or "main app/view"
var contact = new Backbone.Model({
  firstName: "Mauro",
  age: 20
});
var contactView = new ContactView({
  model: contact
});

//for example, let's append it to the body
$("body").append(contactView.render().$el);

现在定义您的视图来扩展此视图而不是普通的Backbone.View，定义您的模板或模型并进行渲染。 

 var ContactView = BaseView.extend({ template: yourRequiredTemplate }); //in your router or "main app/view" var contact = new Backbone.Model({ firstName: "Mauro", age: 20 }); var contactView = new ContactView({ model: contact }); //for example, let's append it to the body $("body").append(contactView.render().$el);

希望对您有所帮助，您可能想看看Marionettejs以查看其提供的专门视图，或者像下面的示例一样滚动自己的视图： http : //liquidmedia.org/blog/2011/02/backbone-js-part- 3 /

解决方案2
 0 已采纳  2014-10-16 18:17:36

答案2，基于您更新的代码。

您没有显示如何连接东西并使应用程序运行，但我想它在您的main.js文件中（您的data-main在requirejs SCRIPT标记中）。

很明显，您没有得到任何结果，原因是：1.您正在渲染方法中创建一个新的集合。2.您没有在fetch该集合，因此永远不会加载数据！

我怀疑您没有阅读我向您推荐的文章，因为您的工作是为CollectionView哭泣，但出于学习目的，这是可以的。 读！ ;） 

var ContributorsView = AbstractPage.extend({
        initialize: function (options) {
          //Backbone automatically stores options.collection on this.collection
          //whenever the collection is reset, re-render this view!
          this.listenTo(this.collection, "reset", this.render);
        },

    render: function () {
        $('.menu li').removeClass('active');
        $('.menu li a[href="' + window.location.hash + '"]').parent().addClass('active');

        //compile the template
        var data = {items: this.collection.toJSON() };
        var compiledTemplate = _.template(contributorsTemplate, data);

        // render my template
        this.$el.html(compiledTemplate);

        // add the sidebar - WHAT'S THIS?
        var sidebarView = new SidebarView();
        sidebarView.render();
    }

});

现在，无论您在何处实例化此视图： 

var contrCollection = new ContributorsCollection();
var mainView = new ContributorsView({ collection: contrCollection });
contrCollection.fetch({reset:true}); //we want to trigger the reset event you're waiting for!

明白我的意思吗？ 从外部提供视图的集合，或在其initialize方法上创建视图。 我一点都不喜欢SidebarView。 您应该在此视图之外（可能是路由器的路由处理程序）创建并渲染该视图。 否则，每次render父视图时​​，您将创建另一个SidebarView，它将永久保留在内存中。 http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

摘要：

  1. 创建收藏集，创建视图
  2. 如果该集合是在外部创建的，则将其提供给视图的选项
  3. 加载数据是异步操作，您应该“等待”数据
  4. 加载数据后，您可能需要重新渲染视图，以便您的模板数据有待显示。

骨干网中的所有内容都与事件相关，因为美好的事情需要时间。 ;）

http://backbonejs.org/#Events-catalog

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从JSON文件加载数据到Backbone集合？ 将数据从JSON文件绑定到Angular 2 View Backbone：从客户端部分的json文件中获取数据 使用来自JSON文件的数据创建模型的Backbone集合 骨干从Json获取数据 在Ionic项目中显示JSON文件中的数据 来自Json文件的骨干集合和localstorage上的缓存 来自外部JSON文件的主干集合未呈现 将JSON数据从Nodejs Express发送到Backbone 从骨干路由器访问JSON数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM