Backbone: μ‚¬μš©μž μ •μ˜λ³΄κΈ° 속성은 μ„œλ‘œ λ‹€λ₯Έ μΈμŠ€ν„΄μŠ€κ°„μ— κ³΅μœ λ©λ‹ˆλ‹€.

에 λ§Œλ“  2012λ…„ 04μ›” 19일  Β·  9μ½”λ©˜νŠΈ  Β·  좜처: jashkenas/backbone

이 λ°”μ΄μ˜¬λ¦°μ„ μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€ : http://jsfiddle.net/XgPyH/31/

κ·Έλž˜μ„œ μš°λ¦¬λŠ” itemView의 μΈμŠ€ν„΄μŠ€ 10 개λ₯Ό λ§Œλ“€κ³  addItem λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜μ—¬ 각 itemView에 10 개의 ν•­λͺ©μ„ μΆ”κ°€ν•©λ‹ˆλ‹€. 각 itemViewμ—λŠ” itemArray 속성에 10 개의 ν•­λͺ©μ΄ μžˆμ–΄μ•Όν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ λŒ€μ‹  itemArray 속성을 κ³΅μœ ν•˜κ³  100 개의 ν•­λͺ©μ„ ν¬ν•¨ν•©λ‹ˆλ‹€.

λ¬Έμ œλŠ” backbone.viewκ°€ μƒμ„±μžμ—μ„œ μ‚¬μš©μž μ •μ˜ 속성을 μž¬μ„€μ •ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬ΈμΌ 수 μžˆμŠ΅λ‹ˆλ‹€.

question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ•Œλ¬Έμ— 예, itemArray 의 ν•œ μ†μ„±μž…λ‹ˆλ‹€ itemView ν”„λ‘œν†  νƒ€μž…, κ·Έκ²ƒμ€μ˜ λͺ¨λ“  μΈμŠ€ν„΄μŠ€μ—μ„œ 곡유 itemView . μΈμŠ€ν„΄μŠ€κ°€ μžμ‹ μ˜ itemArray λ₯Ό κ°–λ„λ‘ν•˜λ €λ©΄ initialize λ˜λŠ” μƒμ„±μžμ—μ„œ μ„€μ •ν•΄μ•Όν•©λ‹ˆλ‹€.

var ItemView = Backbone.View.extend({

  initialize: function() {
    this.itemArray = [];
  },

  ...

});

λͺ¨λ“  9 λŒ“κΈ€

λ•Œλ¬Έμ— 예, itemArray 의 ν•œ μ†μ„±μž…λ‹ˆλ‹€ itemView ν”„λ‘œν†  νƒ€μž…, κ·Έκ²ƒμ€μ˜ λͺ¨λ“  μΈμŠ€ν„΄μŠ€μ—μ„œ 곡유 itemView . μΈμŠ€ν„΄μŠ€κ°€ μžμ‹ μ˜ itemArray λ₯Ό κ°–λ„λ‘ν•˜λ €λ©΄ initialize λ˜λŠ” μƒμ„±μžμ—μ„œ μ„€μ •ν•΄μ•Όν•©λ‹ˆλ‹€.

var ItemView = Backbone.View.extend({

  initialize: function() {
    this.itemArray = [];
  },

  ...

});

λ‹€μŒμ€ 당신이 μ„€λͺ…ν•œ 것을 μˆ˜ν–‰ν•˜λŠ” λ°”μ΄μ˜¬λ¦°μž…λ‹ˆλ‹€. http://jsfiddle.net/XgPyH/32/

μ•ˆλ…•ν•˜μ„Έμš” @braddunbar ,

ν•΄κ²° λ°©λ²•μœΌλ‘œ κ²Œμ‹œ ν•œ 것과 λ™μΌν•œ μ†”λ£¨μ…˜μ„ 이미 μ‚¬μš©ν–ˆμ§€λ§Œ κ·Έλ ‡κ²Œ ν•  ν•„μš”κ°€μ—†λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. κ½€ ν˜Όλž€μŠ€λŸ¬μš΄ 행동이라고 μƒκ°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆκΉŒ?

ν”„λ‘œν†  νƒ€μž…μ—μ„œ μ‚¬μš©ν•˜λŠ” μš©λ„μ— λŒ€ν•΄ μ„€λͺ…ν•΄ μ£Όμ‹œκ² μŠ΅λ‹ˆκΉŒ? (μ €λŠ” 이해가 μ•ˆ λΌμš”. ν˜„μž¬ κ΅¬ν˜„μ΄ ν‹€λ Έλ‹€κ³  λ§ν•˜λŠ” 것이 μ•„λ‹™λ‹ˆλ‹€. 이해λ₯Ό 돕기 μœ„ν•΄ μ„€λͺ…μ„ν•˜λ €κ³ ν•©λ‹ˆλ‹€.)

μš°λ¦¬λŠ” μ’…μ’… @spawnedc κ°€ 그의 λ°”μ΄μ˜¬λ¦°μ—μ„œ μ‚¬μš©ν•œ λ°©μ‹μœΌλ‘œ λͺ¨λ“  뷰의 속성을 μ§€μ •ν•©λ‹ˆλ‹€. κ·Έ

예제 μ•±μ—μ„œλ³΄κΈ° 속성은 λ˜‘κ°™μ€ λ°©μ‹μœΌλ‘œ μ§€μ •λ©λ‹ˆλ‹€ (Todo.js μ°Έμ‘°). "ν…œν”Œλ¦Ώ"λ³€μˆ˜λŠ” λ™μΌν•œ λ°©μ‹μœΌλ‘œ μ§€μ •λ˜μ§€λ§Œ λ¬Όλ‘  λ³€κ²½λ˜μ§€ μ•ŠλŠ” λ¬Έμžμ—΄μ΄κΈ° λ•Œλ¬Έμ— μ΄λŸ¬ν•œ μ’…λ₯˜μ˜ 문제λ₯Ό λ³Ό 수 μ—†μŠ΅λ‹ˆλ‹€.

동적 λ·° 속성을 μ§€μ •ν•˜λŠ” μ˜¬λ°”λ₯Έ 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ? ν™•μ‹€νžˆ init λ©”μ„œλ“œμ—μ„œ λͺ¨λ‘ μž¬μ •μ˜ν•΄μ•Όν•˜λŠ” κ²½μš°κ°€ μ•„λ‹™λ‹ˆλ‹€ ...?

ν”„λ‘œν†  νƒ€μž…μ— μ‚¬μš©ν•˜λŠ” μš©λ„μ— λŒ€ν•΄ μ„€λͺ…ν•΄ μ£Όμ‹œκ² μŠ΅λ‹ˆκΉŒ?

ν”„λ‘œν†  νƒ€μž…μ— λ³€κ²½ κ°€λŠ₯ν•œ 속성 (λ°°μ—΄, ν•΄μ‹œ λ“±)을 λ°°μΉ˜ν•˜λŠ” 것은 λ‚΄ κ²½ν—˜μ—μ„œ 거의 μœ μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€ (일뢀 사둀가 μžˆλ‹€κ³  ν™•μ‹ ν•˜μ§€λ§Œ).

동적 λ·° 속성을 μ§€μ •ν•˜λŠ” μ˜¬λ°”λ₯Έ 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ? ν™•μ‹€νžˆ init λ©”μ„œλ“œμ—μ„œ λͺ¨λ‘ μž¬μ •μ˜ν•΄μ•Όν•˜λŠ” κ²½μš°κ°€ μ•„λ‹™λ‹ˆλ‹€ ...?

예, 클래슀 / μƒμ„±μžμ˜ 각 μΈμŠ€ν„΄μŠ€μ—μ„œ λ³€κ²½ κ°€λŠ₯ν•œ κ°’μœΌλ‘œ 속성을 μ„€μ •ν•˜λ €λ©΄ μƒμ„±μž (λ˜λŠ”μ΄ 경우 μƒμ„±μžμ—μ„œ ν˜ΈμΆœλ˜λŠ” initialize )μ—μ„œ μ„€μ •ν•΄μ•Όν•©λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄, Backbone이 Backbone.Model μΈμŠ€ν„΄μŠ€μ—μ„œ 속성 을

@braddunbar _new_ μΈμŠ€ν„΄μŠ€λ₯Ό μƒμ„±ν•˜λ©΄ _all_ 속성이 _brand new_ μΈμŠ€ν„΄μŠ€

μ•ˆλ…•ν•˜μ„Έμš” @braddunbar ,

ν”„λ‘œν†  νƒ€μž…μ— λ³€κ²½ κ°€λŠ₯ν•œ 속성 (λ°°μ—΄, ν•΄μ‹œ λ“±)을 λ°°μΉ˜ν•˜λŠ” 것은 λ‚΄ κ²½ν—˜μ—μ„œ 거의 μœ μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€ (일뢀 사둀가 μžˆλ‹€κ³  ν™•μ‹ ν•˜μ§€λ§Œ).

이 경우 Bacbone이 itemArray둜 μ •ν™•νžˆν•˜λŠ” 일이 μ•„λ‹™λ‹ˆκΉŒ? itemArrayκ°€ ν”„λ‘œν†  νƒ€μž…μ— μžˆμœΌλ―€λ‘œ μš°λ¦¬κ°€ κ²½ν—˜ν•˜κ³ μžˆλŠ” λ™μž‘μ΄ λ°œμƒν•˜κ³  μžˆμŠ΅λ‹ˆκΉŒ?

@spawnedc λ§ˆμ§€λ§‰ μ§„μˆ μ— 100 % λ™μ˜ν•©λ‹ˆλ‹€. "ν˜•μ œ"뷰의 μΈμŠ€ν„΄μŠ€κ°„μ— μ–΄λ–€ 속성도 곡유 될 κ²ƒμœΌλ‘œ κΈ°λŒ€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μ‹€μ œλ‘œ μƒμ„±μžμ—μ„œ μž¬μ„€μ •λ˜μ§€ μ•ŠλŠ” ν•œ 속성은 μž¬μ„€μ •λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 이듀은 항상 λ™μΌν•œ μƒμ„±μžμ— μ˜ν•΄ 생성 된 λͺ¨λ“  μΈμŠ€ν„΄μŠ€κ°€ κ³΅μœ ν•˜λŠ” λ™μΌν•œ ν”„λ‘œν†  νƒ€μž… μ†μ„±μž…λ‹ˆλ‹€.

var A = function(){};
var a = new A();

var B = function(){};
B.prototype = a;
a.constructor = B;

var b1 = new B();
var b2 = new B();

console.log(b1.foo); // undefined
console.log(b2.foo); // undefined

a.foo = [1];

console.log(b1.foo); // [1]
console.log(b2.foo); // [1]

console.log(b1.foo === b2.foo); // true

관심이 μžˆμœΌμ‹œλ©΄ 여기에 ν›Œλ₯­ν•œ μ„€λͺ…이

이 경우 Bacbone이 itemArray둜 μ •ν™•νžˆν•˜λŠ” 일이 μ•„λ‹™λ‹ˆκΉŒ? itemArrayκ°€ ν”„λ‘œν†  νƒ€μž…μ— μžˆμœΌλ―€λ‘œ μš°λ¦¬κ°€ κ²½ν—˜ν•˜κ³ μžˆλŠ” λ™μž‘μ΄ λ°œμƒν•˜κ³  μžˆμŠ΅λ‹ˆκΉŒ?

λ°”λ‘œ κ·Έκ±°μ£ . κ·Έλž˜μ„œ ν”„λ‘œν†  νƒ€μž… 속성 λŒ€μ‹  initialize itemArray λ₯Ό λ§Œλ“œλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

@braddunbar μ„€λͺ…κ³Ό 링크λ₯Ό 보내 μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€-ν•œνŽΈμœΌλ‘œλŠ” μ—¬μ „νžˆ μ΄μƒν•œ (그리고 μ˜ˆμƒμΉ˜ λͺ»ν•œ) λ™μž‘μ΄μ§€λ§Œ λ‹€λ₯Έ ν•œνŽΈμœΌλ‘œλŠ” 뷰간에 속성을 κ³΅μœ ν•˜λŠ” 것이 ν•©λ¦¬μ μž…λ‹ˆλ‹€.

λ‚˜λŠ” JavaScript Garden 기사λ₯Ό 읽고 λͺ¨λ“  것이 λͺ…ν™•ν•΄μ§ˆ 것이라고 ν™•μ‹ ν•©λ‹ˆλ‹€. :).

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰