Question

我刚刚开始使用CanJS。

从http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/

查看教程后

我想知道contactsList.ejs如何知道将数据放在index.html中的位置？它将数据直接放在index.html中。

这里是否有关于配置的约定？或者我错过了哪一行代码实际上表明在该特定div中有contactsList.ejs？

的index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Contacts Manager >> Part 2</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <h1>Contacts Manager</h1>
        </div>
      </div>
      <div class="row">
        <div class="span3">
          <div class="well">
            <nav id="filter"></nav>
          </div>
        </div>
        <div class="span9">
          <div id="create"></div>
          <div id="contacts"></div>
        </div>
      </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script src="js/can.jquery.js"></script>
    <script src="js/can.fixture.js"></script>
    <script src="js/contacts.js"></script>
  </body>
</html>

Contact.js（并非所有都粘贴在这里，因为它非常冗长）

Contacts = can.Control({
    init: function(){
        this.element.html(can.view('views/contactsList.ejs', {
            contacts: this.options.contacts,
            categories: this.options.categories
        }));
    }
});

Filter = can.Control({
    init: function(){
        var category = can.route.attr('category') || "all";
        this.element.html(can.view('views/filterView.ejs', {
            contacts: this.options.contacts,
            categories: this.options.categories
        }));
        this.element.find('[data-category="' + category + '"]').parent().addClass('active');
    },
    '[data-category] click': function(el, ev) {
        this.element.find('[data-category]').parent().removeClass('active');
        el.parent().addClass('active');
        can.route.attr('category', el.data('category'));
    }
});

$(document).ready(function(){
    $.when(Category.findAll(), Contact.findAll()).then(function(categoryResponse, contactResponse){
        var categories = categoryResponse[0], 
            contacts = contactResponse[0];

        new Filter('#filter', {
            contacts: contacts,
            categories: categories
        });
        new Contacts('#contacts', {
            contacts: contacts,
            categories: categories
        });
    });
});
Contact.List = can.Model.List({
    filter: function(category){
        this.attr('length');
        var contacts = new Contact.List([]);
        this.each(function(contact, i){
            if(category === 'all' || category === contact.attr('category')) {
                contacts.push(contact)
            }
        })
        return contacts;
    },
    count: function(category) {
        return this.filter(category).length;
    }
});

contactsList.ejs

<ul class="clearfix">
    <% list(contacts.filter(can.route.attr('category')), function(contact){ %>
        <li class="contact span8" <%= (el)-> el.data('contact', contact) %>>
            <%== can.view.render('views/contactView.ejs', {contact: contact, categories: categories}) %>
        </li>
    <% }) %>
</ul>

contactView.ejs

<a href="javascript://" class="remove"><i class="icon-remove"></i></a>
<form>
  <div class="row">
    <div class="span2">
      <img src="img/contact.png" width="100" height="100">
    </div>
    <div class="span3">
      <input type="text" name="name" placeholder="Add Name" 
        <%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %>>
      <select name="category">
        <% $.each(categories, function(i, category){ %>
          <option value="<%= category.data %>" <%= contact.category === category.data ? "selected" : "" %>>
            <%= category.name %>
          </option>
        <% }) %>
      </select>
    </div>
    <div class="span3">
      <label>Address</label>
      <input type="text" name="address" 
        <%= contact.attr('address') ? "value='" + contact.address + "'" : "class='empty'" %>>
      <label>Phone</label>
      <input type="text" name="phone" 
        <%= contact.attr('phone') ? "value='" + contact.phone + "'" : "class='empty'" %>>
      <label>Email</label>
      <input type="text" name="email" 
        <%= contact.attr('email') ? "value='" + contact.email + "'" : "class='empty'" %>>
    </div>
  </div>
</form>

Answer 1

我找到了代码行，它位于contact.js

中

$(document).ready(function(){
    $.when(Category.findAll(), Contact.findAll()).then(function(categoryResponse, contactResponse){
        var categories = categoryResponse[0], 
            contacts = contactResponse[0];

    new Filter('#filter', {
        contacts: contacts,
        categories: categories
    });
    new Contacts('#contacts', {
        contacts: contacts,
        categories: categories
    });
});

创建新的控件（如“联系人”）时，它将填充在ID为“联系人”的文档中。

CanJS - 如何在index.html中填充视图.ejs

1 个答案: