Backbone.js는 단일 페이지 ToDo 애플리케이션을 강화합니다.-JS 튜토리얼-php.cn

Backbone.js 为单页 ToDo 应用程序提供支持

Backbone.js는 유연한 웹 애플리케이션을 구축하기 위한 JavaScript 프레임워크입니다. 모델, 컬렉션, 보기, 이벤트, 라우터 및 기타 훌륭한 기능이 함께 제공됩니다. 이 기사에서는 작업 추가, 편집 및 삭제를 지원하는 간단한 ToDo 애플리케이션을 개발합니다. 또한 작업을 "완료"로 표시하고 보관할 수 있어야 합니다. 이 기사를 합리적인 길이로 유지하기 위해 데이터베이스와의 통신은 포함하지 않습니다. 모든 데이터는 클라이언트 측에 저장됩니다.

설정

우리가 사용할 파일 구조는 다음과 같습니다:

으아아아

목차와 같이 /css/styles.css 和 /index.html。它们包含 CSS 样式和 HTML 标记。在 Backbone.js 的上下文中，模型是我们保存数据的地方。因此，我们的待办事项将只是模型。因为我们将有多个任务，所以我们会将它们组织成一个集合。业务逻辑分布在视图和主应用程序文件 App.js 之间。 Backbone.js 只有一个硬依赖项 - Underscore.js。该框架也与 jQuery 配合得很好，因此它们都转到 vendor목차처럼 명백한 내용도 있습니다. 지금 우리에게 필요한 것은 약간의 HTML 마크업뿐입니다. 이제 준비가 되었습니다.

으아아아

보시다시피, body 태그 끝에서 수행하는 것이 좋은 습관이기 때문에 모든 외부 JavaScript 파일을 하단에 포함했습니다. 부팅용 애플리케이션도 준비 중입니다. 콘텐츠 컨테이너, 메뉴 및 헤더가 있습니다. 기본 탐색은 정적 요소이므로 변경하지 않습니다. 제목 내용을 아래 div로 대체합니다.

계획 앱

무언가를 시작하기 전에 계획을 세우는 것은 항상 좋습니다. Backbone.js에는 우리가 따라야 할 매우 엄격한 아키텍처가 없습니다. 이것이 이 프레임워크의 장점 중 하나입니다. 따라서 비즈니스 로직 구현을 시작하기 전에 기본 사항에 대해 이야기해 보겠습니다.

네임스페이스

좋은 방법은 코드를 자체 범위에 넣는 것입니다. 전역 변수나 함수를 등록하는 것은 좋은 생각이 아닙니다. 우리가 만들 것은 모델, 컬렉션, 라우터 및 몇 가지 Backbone.js 뷰입니다. 이 모든 요소는 사적인 공간에 존재해야 합니다. App.js 모든 것을 포함하는 클래스가 포함됩니다.

으아아아

위는 공개된 모듈 패턴의 일반적인 구현입니다. api 变量是返回的对象，代表类的公共方法。 views、models 和 collections 属性将充当 Backbone.js 返回的类的持有者。 content 是一个指向主用户界面容器的 jQuery 元素。这里有两个辅助方法。第一个更新该容器。第二个设置页面的标题。然后我们定义了一个名为 ViewsFactory 모듈. 우리의 관점을 통과하고 마지막으로 라우터를 만듭니다.

뷰를 저장하기 위해 팩토리가 왜 필요한지 물어보실 수도 있습니다. Backbone.js를 사용할 때 몇 가지 일반적인 패턴이 있습니다. 그 중 하나는 뷰 생성 및 사용과 관련이 있습니다.

으아아아

뷰를 한 번만 초기화하고 활성 상태로 유지하는 것이 좋습니다. 데이터가 변경되면 일반적으로 뷰의 메서드를 호출하고 해당 el 개체의 내용을 업데이트합니다. 또 다른 매우 인기 있는 접근 방식은 전체 보기를 다시 생성하거나 전체 DOM 요소를 바꾸는 것입니다. 그러나 성능 측면에서 볼 때 이는 좋지 않습니다. 따라서 우리는 일반적으로 뷰의 인스턴스를 생성하고 필요할 때 이를 반환하는 유틸리티 클래스를 얻습니다.

구성요소 정의

네임스페이스가 있으므로 이제 구성 요소 생성을 시작할 수 있습니다. 메인 메뉴는 다음과 같습니다:

으아아아

내비게이션 클래스를 보유하는 menu라는 속성을 만듭니다. 나중에 팩토리 모듈에 메소드를 추가하여 인스턴스를 생성할 수 있습니다.

으아아아

위는 모든 뷰를 처리하는 방법이며 동일한 인스턴스 중 하나만 가져오도록 보장합니다. 대부분의 경우 이 기술은 잘 작동합니다.

프로세스

애플리케이션의 진입점은 App.js 及其 init 方法。这就是我们将在 window 对象的 onload 및 해당 init 메소드입니다. 이것이 window 객체의 onload 핸들러에서 호출할 것입니다.

으아아아

이후에는 정의된 라우터가 제어권을 갖게 됩니다. URL에 따라 실행할 핸들러를 결정합니다. Backbone.js에는 일반적인 모델-뷰-컨트롤러 아키텍처가 없습니다. 컨트롤러가 누락되었으며 대부분의 로직이 뷰에 배치됩니다. 따라서 모델을 뷰 내의 메소드에 직접 연결하고 데이터가 변경되는 즉시 사용자 인터페이스를 업데이트합니다.

데이터 관리

저희 소규모 프로젝트에서 가장 중요한 것은 데이터입니다. 우리의 임무는 우리가 관리해야 하는 것이므로 거기서부터 시작하겠습니다. 이것이 우리의 모델 정의입니다.

으아아아

필드가 3개뿐입니다. 첫 번째 항목에는 작업 텍스트가 포함되어 있고 나머지 두 개는 레코드 상태를 정의하는 플래그입니다.

框架内的所有东西实际上都是一个事件调度程序。由于模型是通过设置器更改的，因此框架知道数据何时更新，并可以通知系统的其余部分。一旦您将某些内容绑定到这些通知，您的应用程序就会对模型中的更改做出反应。这是 Backbone.js 中一个非常强大的功能。

正如我一开始所说的，我们将有很多记录，我们将它们组织到一个名为 ToDos 的集合中。

// collections/ToDos.js
app.collections.ToDos = Backbone.Collection.extend({
    initialize: function(){
        this.add({ title: "Learn JavaScript basics" });
        this.add({ title: "Go to backbonejs.org" });
        this.add({ title: "Develop a Backbone application" });
    },
    model: app.models.ToDo
    up: function(index) {
        if(index > 0) {
            var tmp = this.models[index-1];
            this.models[index-1] = this.models[index];
            this.models[index] = tmp;
            this.trigger("change");
        }
    },
    down: function(index) {
        if(index < this.models.length-1) {
            var tmp = this.models[index+1];
            this.models[index+1] = this.models[index];
            this.models[index] = tmp;
            this.trigger("change");
        }
    },
    archive: function(archived, index) {
        this.models[index].set("archived", archived);
    },
    changeStatus: function(done, index) {
        this.models[index].set("done", done);
    }
});

로그인 후 복사

initialize 方法是集合的入口点。在我们的例子中，我们默认添加了一些任务。当然，在现实世界中，信息将来自数据库或其他地方。但为了让您集中注意力，我们将手动执行此操作。集合的另一件事是设置 model 属性。它告诉类正在存储什么类型的数据。其余方法实现与我们应用程序中的功能相关的自定义逻辑。 up 和 down 函数更改 ToDos 的顺序。为了简化事情，我们将仅使用集合数组中的索引来标识每个 ToDo。这意味着如果我们想要获取一条特定记录，我们应该指向它的索引。所以，排序只是交换数组中的元素。正如您可能从上面的代码中猜到的那样， this.models 是我们正在讨论的数组。 archive 和 changeStatus 设置给定元素的属性。我们将这些方法放在这里，因为视图将有权访问 ToDos 集合，而不是直接访问任务。

此外，我们不需要从 app.models.ToDo 类创建任何模型，但我们需要从 app.collections.ToDos 集合创建一个实例。

// App.js
init: function() {
    this.content = $("#content");
    this.todos = new api.collections.ToDos();
    return this;
}

로그인 후 복사

显示我们的第一个视图（主导航）

我们必须展示的第一件事是主应用程序的导航。

// views/menu.js
app.views.menu = Backbone.View.extend({
    template: _.template($("#tpl-menu").html()),
    initialize: function() {
        this.render();
    },
    render: function(){
        this.$el.html(this.template({}));
    }
});

로그인 후 복사

虽然只有九行代码，但这里发生了很多很酷的事情。第一个是设置模板。如果您还记得，我们将 Underscore.js 添加到了我们的应用程序中？我们将使用它的模板引擎，因为它运行良好并且使用起来很简单。

_.template(templateString, [data], [settings])

로그인 후 복사

最后有一个函数，它接受一个以键值对形式保存信息的对象，而 templateString 是 HTML 标记。好的，它接受一个 HTML 字符串，但是 $("#tpl-menu").html() 在那里做什么？当我们开发小型单页面应用程序时，我们通常将模板直接放入页面中，如下所示：

// index.html
<script type="text/template" id="tpl-menu">
    <ul>
        <li><a href="#">List</a></li>
        <li><a href="#archive">Archive</a></li>
        <li class="right"><a href="#new">+</a></li>
    </ul>
</script>

로그인 후 복사

由于它是一个脚本标记，因此不会向用户显示。从另一个角度来看，它是一个有效的 DOM 节点，因此我们可以使用 jQuery 获取其内容。因此，上面的简短片段仅获取该脚本标记的内容。

render 方法在 Backbone.js 中非常重要。这就是显示数据的函数。通常，您将模型触发的事件直接绑定到该方法。然而，对于主菜单，我们不需要这样的行为。

this.$el.html(this.template({}));

로그인 후 복사

this.$el 是框架创建的一个对象，每个视图默认都有它（el 前面有一个 $ 因为我们包含了 jQuery）。默认情况下，它是一个空的。当然，您可以使用 tagName 属性来更改它。但这里更重要的是，我们没有直接为该对象赋值。我们不会改变它，我们只是改变它的内容。上面一行和下一行有很大的区别：

this.$el = $(this.template({}));

로그인 후 복사

重点是，如果你想在浏览器中看到变化，你应该先调用 render 方法，将视图附加到 DOM 中。否则只会附加空的 div。还有另一种情况，您有嵌套视图。而且由于您直接更改属性，因此父组件不会更新。绑定的事件也可能被破坏，您需要重新附加侦听器。因此，您实际上应该只更改 this.$el 的内容，而不是属性的值。

视图现已准备就绪，我们需要初始化它。让我们将其添加到我们的工厂模块中：

// App.js
var ViewsFactory = {
    menu: function() {
        if(!this.menuView) {
            this.menuView = new api.views.menu({ 
                el: $("#menu")
            });
        }
        return this.menuView;
    }
};

로그인 후 복사

最后只需调用引导区域中的 menu 方法即可：

// App.js
init: function() {
    this.content = $("#content");
    this.todos = new api.collections.ToDos();
    ViewsFactory.menu();
    return this;
}

로그인 후 복사

请注意，当我们从导航类创建新实例时，我们传递了一个已经存在的 DOM 元素 $("#menu")。所以，视图中的 this.$el 属性实际上指向 $("#menu")。

添加路线

Backbone.js 支持推送状态操作。换句话说，您可以操纵当前浏览器的 URL 并在页面之间移动。但是，我们将坚持使用旧的哈希类型 URL，例如 /#edit/3。

// App.js
var Router = Backbone.Router.extend({
    routes: {
        "archive": "archive",
        "new": "newToDo",
        "edit/:index": "editToDo",
        "delete/:index": "delteToDo",
        "": "list"
    },
    list: function(archive) {},
    archive: function() {},
    newToDo: function() {},
    editToDo: function(index) {},
    delteToDo: function(index) {}
});

로그인 후 복사

上面是我们的路由器。哈希对象中定义了五个路由。键是您将在浏览器地址栏中键入的内容，值是将要调用的函数。请注意，其中两条路由上有 :index。如果您想支持动态 URL，则需要使用该语法。在我们的例子中，如果您输入 #edit/3 ，则 editToDo 将使用参数 index=3 执行。最后一行包含一个空字符串，这意味着它处理我们应用程序的主页。

显示所有任务的列表

到目前为止，我们构建的是我们项目的主视图。它将从集合中检索数据并将其打印在屏幕上。我们可以将相同的视图用于两件事 - 显示所有活动的待办事项和显示已存档的待办事项。

在继续列表视图实现之前，让我们看看它是如何实际初始化的。

// in App.js views factory
list: function() {
    if(!this.listView) {
        this.listView = new api.views.list({
            model: api.todos
        });
    }   
    return this.listView;
}

로그인 후 복사

请注意，我们正在传递集合。这很重要，因为我们稍后将使用 this.model 来访问存储的数据。工厂返回我们的列表视图，但路由器是必须将其添加到页面的人。

// in App.js's router
list: function(archive) {
    var view = ViewsFactory.list();
    api
    .title(archive ? "Archive:" : "Your ToDos:")
    .changeContent(view.$el);
    view.setMode(archive ? "archive" : null).render();
}

로그인 후 복사

目前，在路由器中调用方法 list ，不带任何参数。因此该视图不是 archive 模式，它只会显示活动的 ToDos。

// views/list.js
app.views.list = Backbone.View.extend({
    mode: null,
    events: {},
    initialize: function() {
        var handler = _.bind(this.render, this);
        this.model.bind('change', handler);
        this.model.bind('add', handler);
        this.model.bind('remove', handler);
    },
    render: function() {},
    priorityUp: function(e) {},
    priorityDown: function(e) {},
    archive: function(e) {},
    changeStatus: function(e) {},
    setMode: function(mode) {
        this.mode = mode;
        return this;
    }
});

로그인 후 복사

渲染期间将使用 mode 属性。如果其值为 mode="archive" 则仅显示已存档的 ToDos。 events 是一个我们将立即填充的对象。这是我们放置 DOM 事件映射的地方。其余方法是用户交互的响应，它们直接链接到所需的功能。例如， priorityUp 和 priorityDown 更改待办事项的顺序。 archive 将项目移动到存档区域。 changeStatus 只是将 ToDo 标记为已完成。

initialize 方法内部发生的事情很有趣。前面我们说过，通常您会将模型（在我们的例子中为集合）中的更改绑定到视图的 render 方法。您可以输入 this.model.bind('change', this.render)。但很快您就会注意到 this 关键字在 render 方法中不会指向视图本身。这是因为范围发生了变化。作为解决方法，我们正在创建一个具有已定义范围的处理程序。这就是 Underscore 的 bind 函数的用途。

这里是 render 方法的实现。

// views/list.js
render: function() {)
    var html = '<ul class="list">', 
        self = this;
    this.model.each(function(todo, index) {
        if(self.mode === "archive" ? todo.get("archived") === true : todo.get("archived") === false) {
            var template = _.template($("#tpl-list-item").html());
            html += template({ 
                title: todo.get("title"),
                index: index,
                archiveLink: self.mode === "archive" ? "unarchive" : "archive",
                done: todo.get("done") ? "yes" : "no",
                doneChecked: todo.get("done")  ? 'checked=="checked"' : ""
            });
        }
    });
    html += '</ul>';
    this.$el.html(html);
    this.delegateEvents();
    return this;
}

로그인 후 복사

我们循环遍历集合中的所有模型并生成一个 HTML 字符串，稍后将其插入到视图的 DOM 元素中。很少有检查可以区分待办事项从已存档到活动。在复选框的帮助下，任务被标记为完成。因此，为了表明这一点，我们需要将 checked=="checked" 属性传递给该元素。您可能会注意到我们正在使用 this.delegateEvents()。在我们的例子中这是必要的，因为我们正在从 DOM 中分离和附加视图。是的，我们不会替换主元素，但事件的处理程序将被删除。这就是为什么我们必须告诉 Backbone.js 再次附加它们。上面代码中使用的模板是：

// index.html
<script type="text/template" id="tpl-list-item">
    <li class="cf done-<%= done %>" data-index="<%= index %>">
        <h2>
            <input type="checkbox" data-status <%= doneChecked %> />
            <a href="javascript:void(0);" data-up>&#8593;</a>
            <a href="javascript:void(0);" data-down>&#8595;</a>
            <%= title %>
        </h2>
        <div class="options">
            <a href="#edit/<%= index %>">edit</a>
            <a href="javascript:void(0);" data-archive><%= archiveLink %></a>
            <a href="#delete/<%= index %>">delete</a>
        </div>
    </li>
</script>

로그인 후 복사

请注意，定义了一个名为 done-yes 的 CSS 类，它将 ToDo 绘制为绿色背景。除此之外，还有很多链接，我们将使用它们来实现所需的功能。它们都具有数据属性。元素的主节点li，有data-index。该属性的值显示任务在集合中的索引。请注意，包裹在 <%= ... %> 中的特殊表达式被发送到 template 函数。这就是注入到模板中的数据。

是时候向视图添加一些事件了。

// views/list.js
events: {
    'click a[data-up]': 'priorityUp',
    'click a[data-down]': 'priorityDown',
    'click a[data-archive]': 'archive',
    'click input[data-status]': 'changeStatus'
}

로그인 후 복사

在 Backbone.js 中，事件的定义只是一个哈希值。您首先输入事件的名称，然后输入选择器。属性的值实际上是视图的方法。

// views/list.js
priorityUp: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.up(index);
},
priorityDown: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.down(index);
},
archive: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.archive(this.mode !== "archive", index); 
},
changeStatus: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.changeStatus(e.target.checked, index);       
}

로그인 후 복사

这里我们使用 e.target 进入处理程序。它指向触发事件的 DOM 元素。我们正在获取单击的 ToDo 的索引并更新集合中的模型。通过这四个函数，我们完成了我们的课程，现在数据显示在页面上。

正如我们上面提到的，我们将为 Archive 页面使用相同的视图。

list: function(archive) {
    var view = ViewsFactory.list();
    api
    .title(archive ? "Archive:" : "Your ToDos:")
    .changeContent(view.$el);
    view.setMode(archive ? "archive" : null).render();
},
archive: function() {
    this.list(true);
}

로그인 후 복사

上面是与之前相同的路由处理程序，但这次使用 true 作为参数。

添加和编辑待办事项

按照列表视图的入门，我们可以创建另一个显示用于添加和编辑任务的表单的列表视图。下面是这个新类的创建方式：

// App.js / views factory
form: function() {
    if(!this.formView) {
        this.formView = new api.views.form({
            model: api.todos
        }).on("saved", function() {
            api.router.navigate("", {trigger: true});
        })
    }
    return this.formView;
}

로그인 후 복사

几乎一样。然而，这次表单提交后我们需要做一些事情。这会将用户转发到主页。正如我所说，每个扩展 Backbone.js 类的对象实际上都是一个事件调度程序。您可以使用 on 和 trigger 等方法。

在继续查看代码之前，让我们看一下 HTML 模板：

<script type="text/template" id="tpl-form">
    <form>
        <textarea><%= title %></textarea>
        <button>save</button>
    </form>
</script>

로그인 후 복사

我们有一个 textarea 和一个 button。如果我们要添加新任务，该模板需要一个 title 参数，该参数应该是一个空字符串。

// views/form.js
app.views.form = Backbone.View.extend({
    index: false,
    events: {
        'click button': 'save'
    },
    initialize: function() {
        this.render();
    },
    render: function(index) {
        var template, html = $("#tpl-form").html();
        if(typeof index == 'undefined') {
            this.index = false;
            template = _.template(html, { title: ""});
        } else {
            this.index = parseInt(index);
            this.todoForEditing = this.model.at(this.index);
            template = _.template($("#tpl-form").html(), {
                title: this.todoForEditing.get("title")
            });
        }
        this.$el.html(template);
        this.$el.find("textarea").focus();
        this.delegateEvents();
        return this;
    },
    save: function(e) {
        e.preventDefault();
        var title = this.$el.find("textarea").val();
        if(title == "") {
            alert("Empty textarea!"); return;
        }
        if(this.index !== false) {
            this.todoForEditing.set("title", title);
        } else {
            this.model.add({ title: title });
        }   
        this.trigger("saved");      
    }
});

로그인 후 복사

该视图只有 40 行代码，但它的工作效果很好。仅附加一个事件，即单击“保存”按钮。根据传递的 index 参数，渲染方法的行为有所不同。例如，如果我们正在编辑 ToDo，我们会传递索引并获取确切的模型。如果没有，则表单为空，并且将创建一个新任务。上面的代码中有几个有趣的点。首先，在渲染中，我们使用 .focus() 方法在渲染视图后将焦点带到表单上。应再次调用 delegateEvents 函数，因为表单可以分离并再次附加。 save 方法以 e.preventDefault() 开头。这会删除按钮的默认行为，在某些情况下可能会提交表单。最后，一旦一切完成，我们就会触发 saved 事件，通知外界 ToDo 已保存到集合中。

路由器有两种方法需要填写。

// App.js
newToDo: function() {
    var view = ViewsFactory.form();
    api.title("Create new ToDo:").changeContent(view.$el);
    view.render()
},
editToDo: function(index) {
    var view = ViewsFactory.form();
    api.title("Edit:").changeContent(view.$el);
    view.render(index);
}

로그인 후 복사

它们之间的区别在于，我们传入一个索引，如果 edit/:index 路由匹配。当然，页面标题也会相应更改。

从集合中删除记录

对于此功能，我们不需要视图。整个工作可以直接在路由器的处理程序中完成。

delteToDo: function(index) {
    api.todos.remove(api.todos.at(parseInt(index)));
    api.router.navigate("", {trigger: true});
}

로그인 후 복사

我们知道要删除的 ToDo 的索引。集合类中有一个 remove 方法，它接受模型对象。最后，只需将用户转发到主页，其中就会显示更新后的列表。

结论

Backbone.js 拥有构建功能齐全的单页应用程序所需的一切。我们甚至可以将其绑定到 REST 后端服务，框架将同步您的应用程序和数据库之间的数据。事件驱动方法鼓励模块化编程以及良好的架构。我个人在多个项目中使用 Backbone.js，并且效果非常好。

위 내용은 Backbone.js는 단일 페이지 ToDo 애플리케이션을 강화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!