패키지 사용 aslagle : X 편집 가능한 반응 테이블

Question

내 앱에서 aslagle의 반응성 테이블 패키지를 사용하고 있는데 인라인 편집을 만들고 싶습니다. 검색 한 결과 Meteor 용 x-editable 패키지가 있다는 것을 알았습니다. 어떻게 aslagle : workman : x-editable-reactive-template 패키지와 반응 테이블 패키지를 사용할 수 있습니까?

반응성 - 테이블 설정 :

tableSettings: function() { 
     return { 
      collection: fLogCollection, 
      rowsPerPage: 10, 
      showFilter: true, 
      fields: [ 
      { key: 'name', label: 'Name'}, 
      { key: 'amount', 
       label: 'Amount', 
       tmpl: Template.xEditableAmount 
      }, 
      { key: 'cashFrom', label: 'Cash From'}, 
      { key: 'dateIs', label: 'Date', sortOrder: 0, sortDirection: 'descending'}, 
      { key: 'controls', label: 'Controls', fn: function() { 
       return new Spacebars.SafeString(
       "<button class='editFlog'><span class='glyphicon glyphicon-pencil'></span> </button>"+ 
       "<button class='delete'><span class='glyphicon glyphicon-remove'></span> </button>" 
       ); } }, 
      { key: 'createdAt', label: 'createdAt', hidden: true }, 
      ], 
     }; 
    }, 

xEditableAmount 템플릿 :

<template name="xEditableAmount"> 
     <a href="#" id="amount" data-type="text" class="editable" data-title="Enter the new amount">{{amount}}</a> 
</template> 

X-편집 렌더링 얻기 위해이 코드

나는이 시도 :

Template.fLog.onRendered(function() { 
    this.$('.editable').editable({ 
     success: function (response, newValue) { 
     if(response.status == 'error') return response.msg; //msg will be shown in editable form 
     else Meteor.call('flog.edit2', this._id, newValue); 
     }, 
    }); 
}); 

16,나는 X-편집 렌더링 제작에 성공했지만

나는 ... 컬렉션의 새 값으로 업데이트 필드를 얻기에 실패

Answer 1

당신은 그것을 만드는 필드에 템플릿을 삽입 할 수

당신이 원하는 거의 모든 것을 추가하는 데 편리합니다.

템플릿 도우미 :

tableSettings: function() { 
    return { 
     collection: foo, 
     fields: [ 
      { 
       key: 'foo_1', 
       label: 'Foo 1', 
       tmpl: Template.foo1, 
      }, 
      { 
       key: 'foo_2', 
       label: 'Foo 2', 
       tmpl: Template.foo2, 
      }, 
      { 
       key: 'foo_2', 
       label: 'Foo 2', 
       tmpl: Template.foo2, 
      } 
     ] 
    }; 
} 

도우미 (workman/x-editable-reactive-template atmosphere page에서 직접 복사)에서는 foo2에서 : 당신의 템플릿에서

Template.foo2.helpers({ 
    onSuccess: function() { 
     var id = this._id; 
     return function (res, val) { 
      MyColl.update({ _id: id }, { $set: { prop: val } }); 
     } 
    } 
}); 

는 :

<template name='table> 
    {{> reactiveTable settings=tableSettings}}` 
</template> 

<template name='foo1'> 
    <!-- Any html (below pasted from docs (link at bottom of post)--> 
    <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a> 
</template> 

<template name='foo2'> 
    {{> xEditable type="text" success=onSuccess placement="right" }} <!-- put your workman:x-editable-reactive-template here --> 
</template> 

이 오른쪽에서 지적 받아야 방향.

https://vitalets.github.io/x-editable/docs.html