瀏覽代碼

[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 年之前
父節點
當前提交
03ebde7194
共有 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>