sử dụng đòi hỏi và xương sống để tải mẫu thông qua tập tin html và không script tag

Question

Tôi có một trang web rất đơn giản đó là sử dụng xương sống đơn giản chỉ để tải một cái nhìn từ một mẫu file:

<div id="content"></div> 

<script src="js/vendor/json2.js"></script> 
    <script src="js/vendor/jquery-2.0.2.min.js"></script> 
    <script src="js/vendor/underscore-min.js"></script> 
    <script src="js/vendor/backbone-min.js"></script> 
    <script src="js/flight-match-form.js"></script> 
    <script type="text/template" id="template-flight-match"> 
     <section id="form-search" class="content-inner clearfix"> 
     <div id="date-container" class="search-row clearfix"> 
      <label class="search-label" for="date">Travel Date</label> 
      <img src="images/structure/icon-calendar.png" alt="calendar" class="calendar"> 
      <span class="help-text" id="date-unknown">don't know it?</span> 
     </div> 
     <div id="flight-container" class="search-row clearfix"> 
      <label class="search-label" for="date">FLIGHT #</label> 
      <input type="text" class="search-input" id="input-flight" pattern="[a-zA-Z0-9]+"> 
      <span class="help-text" id="date-unknown">don't know it?</span> 
     </div> 
     <button id="button-match"> 
      Match 
      <img src="images/structure/icon-arrow.png" height="15" width="20" alt="Submit Arrow"> 
     </button> 
     </section> 
    </script> 

và trong khi bay trận đấu -form.js, tôi chỉ đơn giản nói:

$(document).ready(function(){ 

    var MatchView = Backbone.View.extend({ 
     initialize: function(){ 
      this.render(); 
     }, 
     render: function(){ 
      // Compile the template using underscore 
      var template = _.template($("#template-flight-match").html(), {}); 
      // Load the compiled HTML into the Backbone "el" 
      this.$el.html(template); 
     } 
    }); 

    var matchView = new MatchView({ el: $("#content") }); 

}); 

này hoạt động tuyệt vời, và tất cả tôi thực sự muốn làm tiếp theo là để có được tất cả những gì html ra khỏi một thẻ script và vào một tập tin HTML thích hợp, nơi tôi nghĩ rằng nó thuộc về. Vì vậy, không ai biết cách đơn giản nhất để làm điều này?

Tôi cố gắng theo dõi this tutorial và nó dẫn tôi xuống lỗ thỏ lớn này, nơi tôi đã sử dụng require.js và mô-đun văn bản và bộ định tuyến và hai tệp js mới (chính và ứng dụng), cùng với xem và mẫu. Tôi hiện đang nhận được một lỗi trong xem nói rằng xương sống không thể đọc tài sản 'xem' của undefined. Đây là mã của tôi:

Trong index.html, tôi bao gồm require.js, và làm cho nó tham khảo main.js như file inital:

sau đó trong main.js, tôi chỉ định một thư mục template, và gửi nó đi để app.js:

require.config({ 
    paths: { 
    jquery: 'vendor/jquery/jquery-2.0.2.min', 
    underscore: 'vendor/underscore/underscore-min', 
    backbone: 'vendor/backbone/backbone-min', 
    templates: '../templates' 
    } 
}); 

require([ 
    'app', 
], function(App){ 
    App.initialize(); 
}); 

trong app.js, tôi khởi router:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'router', // Request router.js 
], function($, _, Backbone, Router){ 
    var initialize = function(){ 
    // Pass in our Router module and call it's initialize function 
    Router.initialize(); 
    }; 

    return { 
    initialize: initialize 
    }; 
}); 

và trong router.js, tôi thiết lập một lộ trình cho vie tôi w:

// Filename: router.js 
define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'views/search/SearchFormView' 
], function($, _, Backbone, SearchFormView) { 

    var AppRouter = Backbone.Router.extend({ 
    routes: { 
     // Define some URL routes 
     'search': 'SearchFormView' 
    } 
    }); 

    var initialize = function(){ 

    var app_router = new AppRouter; 

    app_router.on('route:SearchFormView', function(){ 

     // Call render on the module we loaded in via the dependency array 
     var searchView = new SearchFormView(); 
     searchView.render(); 

    }); 
    Backbone.history.start(); 
    }; 
    return { 
    initialize: initialize 
    }; 
}); 

Cuối cùng, tôi chỉ cần tạo điểm cho rằng, đó sẽ được tải mẫu của tôi:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/search/search-form-template.html' 

], function($, _, Backbone, searchFormTemplate){ 
    var SearchFormView = Backbone.View.extend({ 
    initialize: function(){ 
     this.render(); 
    }, 
    render: function(){ 
     // Compile the template using underscore 
     var template = _.template($("#template-flight-match").html(), {}); 
     // Load the compiled HTML into the Backbone "el" 
     this.$el.html(template); 
    } 
    }); 
    return SearchFormView; 
}); 

nhưng nó không làm việc, và tôi không thể hiểu tại sao. Bất kỳ sự giúp đỡ nào cũng được đánh giá cao. Xin lỗi vì số lượng mã quá nhiều, nhưng tất cả nó có vẻ là cần thiết chỉ để tải công cụ này một cách thích hợp.

Answer 1

của bạn Tại thời điểm bạn thực sự có một vấn đề với cấu hình của bạn. Xương sống không phải là mô-đun AMD, vì vậy bạn phải sử dụng tùy chọn shim của requirejs. Vâng, ví dụ nói cho chính nó như là về Backbone.

Answer 2

Cài đặt plugin văn bản trong đó có sẵn tại https://github.com/requirejs/text

Sau đó tiến hành để xác định các plugin ở đây:

require.config({ 
    paths: { 
    text: '{{directory where you put text.js}}', 
    } 
}); 

Kể từ khi chúng ta đang ở chủ đề này, requirejs-tpl-plugin là một lựa chọn tốt hơn https://github.com/jfparadis/requirejs-tpl

Answer 3

bạn phải sử dụng mẫu mà bạn đang yêu cầu trong trường hợp này, searchFormTemplate thay vì cố gắng lấy nó bằng jquery.

Plugin văn bản sẽ cung cấp cho bạn mã HTML phù hợp và nó sẽ được đặt trong biến tìm kiếmFormTemplate để bạn có thể sử dụng nó.

thay đổi này trong yhe làm cho chức năng của SearchFormeView

render: function(){ 
    // Compile the template using underscore 
    var template = _.template(searchFormTemplate, {}); // 
    // Load the compiled HTML into the Backbone "el" 
    this.$el.html(template); 
}