Backbone.일의 시작 2
11972 단어 jQueryJavaScriptBackbone.js
소스 코드
지난번 보도에 추가
View.소스 코드는 길게 느껴지지만 간단한 일만 합니다.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>こんにちは。動物さん</title>
<!-- テンプレート作成 -->
<script type="text/template" id="animal-template">
<div>
こんにちは。<b><%- name %>ちゃん。</b>(<%- species %>)
</div>
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
</head>
<body>
<h3>こんにちは。動物さん。</h3>
<div id="myList"></div>
<script type="text/javascript">
(function() {
//----------
// Model作成
//----------
var Animal = Backbone.Model.extend({
//Attribute(属性)
defaults: {
species: "Animal",
name: "None"
},
//コンストラクタ
initialize: function(){
console.log("初期化処理 : " + this.get("species"));
},
//メソッド
call: function(){
console.log("動物 : " + this.get("species"));
console.log("私の名前は" + this.get("name") + "です。");
}
});
//Animalのインスタンス化
var none = new Animal();
//Animal(犬)のインスタンス化
var dog = new Animal({
species: "犬",
name: "ポチ"
});
//Animal(猫)のインスタンス化
var cat = new Animal({
species: "猫",
name: "タマ"
});
//----------
// View作成
//----------
var BaseView = Backbone.View.extend({
tagName: "div",
//id: "myDivId",
className: "myDivClass",
//テンプレート作成
template: _.template($('#animal-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
//イベント定義
events: {
"click": "call"
},
//イベント実装
call: function(){
this.model.call();
//alert(this.model.get("name"));
}
});
var dogDiv = new BaseView({model: dog});
var catDiv = new BaseView({model: cat});
$('#myList').append(dogDiv.render().el);
$('#myList').append(catDiv.render().el);
})();
</script>
</body>
</html>
실행 결과
브라우저의 문자를 눌렀을 때
Model 에 설치하는 방법을 실행하여 컨트롤러에 결과를 표시합니다.
Reference
이 문제에 관하여(Backbone.일의 시작 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tajihiro/items/2d2f15c8c08dd9c53f21텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
