0

CanJSを始めたばかりです。

http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/からチュートリアルを表示した後

contactList.ejs は、データを index.html 内のどこに配置するかをどのように認識しているのでしょうか。index.html の内部にデータを直接配置しました。

ここで行われている構成に関する規則はありますか? それとも、その特定の div 内に contactList.ejs があることを実際に示しているコード行を見逃したのでしょうか?

索引.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;
    }
});

contactList.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>
4

1 に答える 1

3

コード行を見つけました。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 が入力されます。

于 2013-08-18T06:04:47.307 に答える