浏览代码

[core] Add csv list input ko component

This turns the list input that we use into a ko component. If the parameter value is an observableArray it will add the list values to the array, if it's just an observable it will set the values as csv.
Johan Ahlen 10 年之前
父节点
当前提交
03ebde7
共有 1 个文件被更改,包括 65 次插入0 次删除
  1. 65 0
      desktop/core/src/desktop/templates/ko_components.mako

+ 65 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -562,4 +562,69 @@ from django.utils.translation import ugettext as _
       });
     }());
   </script>
+</%def>
+
+
+<%def name="csvListInput()">
+  <script type="text/html" id="csv-list-input-template">
+    <ul data-bind="sortable: values, visible: values().length" class="unstyled">
+      <li style="margin-bottom: 4px">
+        <div class="input-append">
+          <input type="text" data-bind="textInput: value, valueUpdate: 'afterkeydown', attr: { placeholder: $parent.placeholder }"/>
+          <span class="add-on move-widget muted"><i class="fa fa-arrows"></i></span>
+        </div>
+        <a href="#" data-bind="click: function(){ $parent.removeValue(this); }">
+          <i class="fa fa-minus"></i>
+        </a>
+      </li>
+    </ul>
+    <div style="min-width: 280px; margin-top: 5px;">
+      <a class="pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
+        <i class="fa fa-plus"></i>
+      </a>
+    </div>
+  </script>
+
+  <script type="text/javascript" charset="utf-8">
+    (function() {
+      function CsvListInputViewModel (params) {
+        this.valueObservable = params.value;
+        this.isArray = $.isArray(this.valueObservable());
+        this.placeholder = params.placeholder || '';
+
+        var initialValues = this.isArray ? this.valueObservable() : this.valueObservable().split(",");
+        for (var i = 0; i < initialValues.length; i++) {
+          initialValues[i] = { value: ko.observable(initialValues[i].trim()) };
+          initialValues[i].value.subscribe(this.updateValueObservable, this);
+        }
+        this.values = ko.observableArray(initialValues);
+        this.values.subscribe(this.updateValueObservable, this);
+      }
+
+      CsvListInputViewModel.prototype.addValue = function () {
+        var newValue = { value: ko.observable('') };
+        newValue.value.subscribe(this.updateValueObservable, this);
+        this.values.push(newValue);
+      };
+
+      CsvListInputViewModel.prototype.removeValue = function (valueToRemove) {
+        this.values.remove(valueToRemove);
+      };
+
+      CsvListInputViewModel.prototype.updateValueObservable = function () {
+        var cleanValues = $.map(this.values(), function (item) {
+          return item.value();
+        });
+        cleanValues = $.grep(cleanValues, function (value) {
+          return value;
+        });
+        this.valueObservable(this.isArray ? cleanValues : cleanValues.join(','));
+      };
+
+      ko.components.register('csv-list-input', {
+        viewModel: CsvListInputViewModel,
+        template: { element: 'csv-list-input-template' }
+      });
+    }());
+  </script>
 </%def>