javascript - 使用 Backbone.js 和 Underscore.js 的应用程序-6ren

javascript - 使用 Backbone.js 和 Underscore.js 的应用程序

转载作者：行者123 更新时间：2023-11-30 16:58:42

25

4

我是 Backbone 和 Underscore 的初学者。所以这是我制作的 javascript。它即将添加书签并显示它们，这意味着使用来自 Backbone 的模型和 View 。但是我猜我遇到了一个问题，因为运行时什么也没有发生，所以如果有人能指出我的错误？？提前致谢。这是 ann.js 之后是 index.html

var app = app || {};
app.Bookmark = Backbone.Model.extend({
    defaults: {
        key : 'Unknown',
        value : 'Example',
        lien : 'http://www.example.com'
    }
});
app.Ensbookmark = Backbone.Collection.extend({
    model : app.Bookmark
});

app.BookmarkView = Backbone.View.extend({
    tagName: 'div',
    template: $('#bookmarkTemplate').html(),
    events :{
        'click .delete': 'delBookmark'
    },
    delBookmark:function(){
      this.model.destroy();
        this.remove();
    },
    render: function(){
        var tmp1 = _.template(this.template);
        this.$el.html(tmp1(this.model.toJSON()));
        return this;
        /*
         this.$el.html(this.template(this.model.attributes));
         return this;
         */

    }
});

app.EnsbookmarkView = Backbone.View.extend({
    el:$( '#bookmarks' ),
    initialize: function(initialBookmarks){
        this.collection = new  app.Ensbookmark(initialBookmarks);
        this.render();
        this.listenTo(this.collection, 'add', this.renderBookmark);
    },
    events:{
        'click #add':'addBookmark'
    },
    addBookmark: function (e){
        e.preventDefault();
        var data = {};
        $('#addBookmark div').children('input').each(function(i,el){
            if($(el).val()!==""){
                data[el.id]=$(el).val();
            }
        });
        this.collection.add(new app.Bookmark(data));
    },

    render: function() {
        this.collection.each(function (item) {
            this.renderBookmark(item);
        }, this);
    },
    renderBookmark:function(item){
        var BookmarkView = new app.BookmarkView({
            model: item
        });
        this.$el.append(BookmarkView.render().el);
    }

});
var appTest = new app();

<!DOCTYPE html>
<html>
	<head>
		<title>Web</title>
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://underscorejs.org/underscore-min.js"></script>
        <script src="http://backbonejs.org/backbone-min.js"></script>
        <script src="ann.js"></script>

	</head>

	<body>

        <script id="bookmarkTemplate" type="text/template">
            <ul>
                <li><%= key %></li>
                <li><%= value %></li>
                <li><%= lien %></li>
            </ul>
            <button class="delete">Supprimer</button>

        </script>

        <div id="bookmarks">
            <form id="addBookmark" action="#">
                <div>
                    Id : <input type="text" id="key"/>
                    Titre : <input type="text" id="value"/>
                    Lien : <input type="url" id="lien">
                    
                    <button id="add">Add</button>
                </div>
            </form>
        </div>
    </body>

</html>

最佳答案

改变了 var appTest = new app();

到

var appTest = new app.EnsbookmarkView;

它可以工作，甚至在控制台中也没有错误

你可以在底部试试

var app = app || {};
app.Bookmark = Backbone.Model.extend({
    defaults: {
        key : 'Unknown',
        value : 'Example',
        lien : 'http://www.example.com'
    }
});
app.Ensbookmark = Backbone.Collection.extend({
    model : app.Bookmark
});

app.BookmarkView = Backbone.View.extend({
    tagName: 'div',
    template: $('#bookmarkTemplate').html(),
    events :{
        'click .delete': 'delBookmark'
    },
    delBookmark:function(){
      this.model.destroy();
        this.remove();
    },
    render: function(){
        var tmp1 = _.template(this.template);
        this.$el.html(tmp1(this.model.toJSON()));
        return this;
        /*
         this.$el.html(this.template(this.model.attributes));
         return this;
         */

    }
});

app.EnsbookmarkView = Backbone.View.extend({
    el:$( '#bookmarks' ),
    initialize: function(initialBookmarks){
        this.collection = new  app.Ensbookmark(initialBookmarks);
        this.render();
        this.listenTo(this.collection, 'add', this.renderBookmark);
    },
    events:{
        'click #add':'addBookmark'
    },
    addBookmark: function (e){
        e.preventDefault();
        var data = {};
        $('#addBookmark div').children('input').each(function(i,el){
            if($(el).val()!==""){
                data[el.id]=$(el).val();
            }
        });
        this.collection.add(new app.Bookmark(data));
    },

    render: function() {
        this.collection.each(function (item) {
            this.renderBookmark(item);
        }, this);
    },
    renderBookmark:function(item){
        var BookmarkView = new app.BookmarkView({
            model: item
        });
        this.$el.append(BookmarkView.render().el);
    }

});
var appTest = new app.EnsbookmarkView;

<!DOCTYPE html>
<html>
	<head>
		<title>Web</title>
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://underscorejs.org/underscore-min.js"></script>
        <script src="http://backbonejs.org/backbone-min.js"></script>
        <script src="ann.js"></script>

	</head>

	<body>

        <script id="bookmarkTemplate" type="text/template">
            <ul>
                <li><%= key %></li>
                <li><%= value %></li>
                <li><%= lien %></li>
            </ul>
            <button class="delete">Supprimer</button>

        </script>

        <div id="bookmarks">
            <form id="addBookmark" action="#">
                <div>
                    Id : <input type="text" id="key"/>
                    Titre : <input type="text" id="value"/>
                    Lien : <input type="url" id="lien">
                    
                    <button id="add">Add</button>
                </div>
            </form>
        </div>
    </body>

</html>

关于javascript - 使用 Backbone.js 和 Underscore.js 的应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29242820/

25

4

0

文章推荐： c# - 应用洞察监控

文章推荐： javascript - 组合两个普通数组以创建 key :value pair array

underscore.js - Underscore.js检查数组中的元素是否存在？
如何检查underscore.js中数组中的元素是否存在？例如，我有['aaa', 'bbb', 'cfp', 'ddd']，并想检查'cfp'是否存在。如果可以，我想显示一些文本。我的以下代码无法正
underscore.js - 如何使用 Underscore.js 获取累积和数组？
我有一个 array = [1,2,3,4,5]并想使用 underscore.js 获得累积和数组. 我想要的结果是: [1,3,6,10,15] 我想要数组而不是累积总和 15 作为值。任何帮助，
underscore.js - 如何在 underscore.js 模板中打印数组？
我正在使用 underscore.js的模板库，我不确定如何在模板中使用逻辑。例如，我想在模板中打印一组标签。最好的方法是什么？ Javascript: bunny_data = { name:
javascript - underscore - 使用 underscore.js 将复杂对象转换为数组
我正在尝试将我的对象数组格式化为一个数组以供组件使用。我需要将对象的确切值映射到正确的位置。例如我的原始数据: var rawData = [ { name: 'j
underscore.js - lodash/underscore 中的indexBy 相反？
我有一个带有键的对象 var obj = { a: { fruit: 'Apple' }, b: { fruit: 'Banana' } } 我想快速将键 (a/b) 移动到作为属性 name 的值
underscore.js - 如何使用 underscore.js 获取基于嵌套属性的唯一数组
我有一个像这样的 json 数组: myArray=[{ a:1, b:[{c:"x",d:"y"}, {c:"r", d:"s"}...] },
underscore.js - 使用 underscore.js _.where 函数查找多个字符串
可以说我有这个对象数组。 var initialData = [{Title:"Hat",Price:49.95}, {Title:"Pants",Price:7
underscore.js - 使用 underscore.js findWhere 函数时如何为属性名称使用变量？
在使用 _.findWhere 函数时，我无法弄清楚如何在 underscore.js 中动态设置属性。这是该函数的文档: findWhere_.findWhere(list, properties
underscore.js - 如果没有行号，调试 underscore.js 模板很困难
我正在将一个相当大的 php 模板(其中包含基本逻辑的页面)转换为一个 underscore.js 模板。问题是我一直有错误，并且它是缩小的“编译”版本在抛出错误时没有提供有用的信息或行号。有没有
php - "double underscore"和 "underscore x"有什么区别？
在 PHP 中，特别是在 Wordpress 中，__('string') 和 _x('string') 有什么区别？我正在阅读 Wordpress 文档并感到困惑。以下混淆的好例子来自 Wordp
underscore.js - Lodash 和 Underscore.js 的区别
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 提供事实和引用来回答它. 关闭3年前。社区在上个月审核了是
underscore.js - 如何在 underscore.js 中处理 JSON 日期
如何在 underscore.js 中查询日期？我知道我不能做“之间”子句，但请参阅下面的代码作为示例。我的目标是根据用户指定的日期范围将 JSON 数据加载到图表中。 var testdata=[{
java - 无法解析 "$"underscore-java(underscore.js 的 java 端口)
$.each(asList(1, 2, 3), new Block() { public void apply(Integer item) { System.out.print
struct - cgo 从 Go : underscore or no underscore? 访问 C 结构字段
我遇到了在线文档与我在程序中看到的在 GO 代码中访问 C 结构的行为之间的脱节。 go version 说我正在使用: go version go1.4.2 linux/amd64 根据GO CGO
underscore.js - 为什么 _.escape 会修改 Underscore.js 中的/字符？
我正在浏览Underscore.js api我注意到 _.escape逃脱& , , " , ' , 和 /字符。让我吃惊的是逃跑/ . 有没有逃避的理由/我不知道的字符？最佳答案编辑 : 好吧
c#Discord BOT : send string with underscore (escape underscore in Visual Studio string)
我想发送带有几个下划线的字符串 "__hello__its_me_"但 Discord 将其解释为 Markdown 并在我的字符串下划线或斜体。我知道我必须用反斜杠转义下划线，但在 Visual
underscore.js - Visual Studio Online 中托管构建 Controller 上的 underscore.d.ts 中的 TypeScript 编译错误
我有一个连接到 Visual Studio Online 的 Azure 网站。连接两者时，Visual Studio Online 会在托管构建 Controller 上创建一个持续交付构建运行。此
underscore.js - 模板设置不起作用
当我尝试呈现以下模板时，在运行时出现编译错误: Title: Author:
underscore.js - 将分隔的字符串拆分为对象
我发现自己经常使用以下模式 var line = "12|John Doe" var pieces = line.split("|") var user = { id : pieces[0],
underscore.js - 下划线插值设置
我正在尝试在主干中使用带下划线的 Handlebars 样式模板(与require.js一起使用)。我有以下几点: _.templateSettings.interpolate = /\{\{(.+

首页

博学

6Ren·AI

商城

javascript - 使用 Backbone.js 和 Underscore.js 的应用程序