Cách xử lý các trường hợp chuyển đổi trong các mẫu Meteor

Question

Cách tốt nhất để xử lý một trường hợp chuyển đổi trong một mẫu (ví dụ: một nút có 4 trạng thái có thể) là gì? Có vẻ như sai để kéo html ra một helper, nhưng nó cảm thấy giống như xấu để đưa logic vào mẫu ...

Edit:

Như bạn thấy, đưa html trong một helper là xa lý tưởng, nhưng thay đổi một lớp học, một tên tag, tài sản, và nội dung, sẽ làm cho các mẫu hoàn toàn không đọc được.

Template.nextMeetup.helpers({ 
    rsvpButton: function(rsvp) { 
     var button; 

     switch(rsvp){ 
      case 'yes': 
       button = '<a ' + this.event_url + 'class="rsvp btn btn-success pull-right" title="visit event page" target="_blank"><i class="icon-check"></i> I\'m Attending</a>'; 
      break; 
      case 'maybe': 
       button = '<a ' + this.event_url + 'class="rsvp btn btn-warning pull-right" title="visit event page" target="_blank"><i class="icon-warning-sign"></i> I might go</a>'; 
      break; 
      case 'no': 
       button = '<a ' + this.event_url + 'class="rsvp btn btn-danger pull-right" title="visit event page" target="_blank"><i class="icon-remove"></i> I\'m not going</a>'; 
      break; 
      case 'none': 
       button = '<a ' + this.event_url + 'class="rsvp btn btn-inverse pull-right" title="visit event page" target="_blank"><i class="icon-spinner"></i> I havn\'t decided</a>'; 
      break; 
      default: 
       button = '<button class="rsvp signIn btn btn-disabled pull-right">Sign in to RSVP</button>'; 
     } 
     return new Handlebars.SafeString(button); 
    } 
}); 

Answer 1

Không chắc bạn đang cố gắng đầu ra gì, nhưng người trợ giúp đánh giá sự bình đẳng có thể sẽ tham gia. Đặt điều này trong một file JavaScript client-nạp của dự án của bạn:

Template.registerHelper("equals", function (a, b) { 
    return (a == b); 
}); 

Sau đó, bạn có thể tạo ra một cái gì đó tương tự như một cấu trúc switch-trường hợp sử dụng if khối và equals helper mới của bạn. Ví dụ, nếu bạn đang lưu trữ trạng thái của một nút trong một biến có tên btnState và các giá trị có thể là 1, 2 hoặc 3:

<button class="{{#if equals btnState 1}}btn-active{{/if}} 
       {{#if equals btnState 2}}btn-inactive{{/if}} 
       {{#if equals btnState 3}}btn-disabled 
       {{else}}btn-default{{/if}}"> 

Nếu bạn muốn switch - khả năng ngắn mạch thêm case 's kiểm tra sau khi nó chạm một giá trị đích thực, và/hoặc một trường hợp mặc định lúc kết thúc, cách làm như vậy là với một bộ xấu xí của lồng nhau if-else khối:

<button class="{{#if equals btnState 1}} 
       btn-active 
       {{else}} 
       {{#if equals btnState 2}} 
        btn-inactive 
       {{else}} 
        {{#if equals btnState 3}} 
        btn-disabled 
        {{else}} 
        btn-default 
        {{/if}} 
       {{/if}} 
       {{/if}}"> 

Ví dụ này là gần như trivially đơn giản; Tôi giả sử rằng bạn đang sử dụng cấu trúc này như một cấu trúc điều khiển cho một mẫu lớn, thay vì một cái gì đó giống như btn-default bạn có hàng tá dòng HTML.

Nếu bạn thực sự đang sử dụng nó cho đoạn văn bản ngắn như tên lớp CSS, bạn có thể tạo một trình trợ giúp để ánh xạ một nhóm các trường hợp với một bộ chuỗi được trả về. Ví dụ (CoffeeScript):

Template.registerHelper "switch", (input, cases, output, def) -> 
    # input is the variable we're comparing, i.e. switch(input) 
    # cases is an EJSON-stringified array, i.e. case "foo", case "bar" 
    # output is an EJSON-stringified array of strings to return for each case 
    # def (default) is a string to return if none of the cases are met 

    # Validate input, convert EJSON strings into arrays: 
    unless input? and _.isString(cases) and _.isString(output) 
    return "" 
    cases = EJSON.parse cases 
    output = EJSON.parse output 
    unless _.isArray(cases) and _.isArray(output) and 
    cases.length is output.length 
     return "" 

    # Evaluate each case, returning as soon as the first case is true: 
    for value, index in cases 
    return output[index] if input is value 

    # If we've made it this far, none of the cases were met; return def (default): 
    if def? and _.isString(def) then return def else return "" 

Và để sử dụng nó:

{{switch btnState "[1,2,3]" 
    "[\"btn-active\",\"btn-inactive\",\"btn-disabled\"]" "btn-default"}} 

tay lái không cho phép đi qua mảng hoặc đối tượng vào những người giúp đỡ, vì thế mà vặn vẹo với chuỗi JSON truyền như tham số và sau đó phân tích cú pháp.

Answer 2

Sử dụng một mẫu cho mỗi nút và một mẫu động thêm

mẫu helper của bạn, trả lại mẫu động:

Template.nextMeetup.helpers({ 
    rsvpButtonTemplate: function(rsvp) { 
     switch(rsvp){ 
      case 'yes': return Template.buttonYes; 
      case 'maybe': return Template.buttonMaybe; 
      case 'no': return Template.buttonNo; 
      case 'none': return Template.buttonNone; 
     } 
    } 
}); 

mẫu chính của bạn, gọi mẫu helper:

<template name="myPage"> 
    ... 
    {{> rsvpButtonTemplate}} 
    ... 
</template> 

4 nút của bạn:

<template name="buttonYes"> 
    <a {{event_url}} class="rsvp btn btn-success pull-right" title="visit event page" target="_blank"><i class="icon-check"></i> I'm Attending</a> 
</template> 
<template name="buttonMaybe"> 
    <a {{event_url}} class="rsvp btn btn-warning pull-right" title="visit event page" target="_blank"><i class="icon-warning-sign"></i> I might go</a> 
</template> 
<template name="buttonNo"> 
    <a {{event_url}} class="rsvp btn btn-danger pull-right" title="visit event page" target="_blank"><i class="icon-remove"></i> I'm not going</a> 
</template> 
<template name="buttonNone"> 
    <a {{event_url}} class="rsvp btn btn-inverse pull-right" title="visit event page" target="_blank"><i class="icon-spinner"></i> I havn't decided</a> 
</template>