Thanks, Andrew! You got me on the right track...for others interested, I
was able to get this working with my test case of a hardcoded value with
the following:
return ko.components.register('text-widget', {
viewModel: function(params) {
params.configKeys = ['placeholder', 'width', 'maxLength',
'defaultValue'];
this.username = ko.observable("abc");
this.username.subscribe(function(newValue) {
params.value(newValue);
});
this.username.subscribe(function(oldValue) {
params.value(oldValue);
}, null, "beforeChange");
WidgetViewModel.apply(this, [params]);
},
template: { require: 'text!widget-templates/text' }
});
On Monday, January 20, 2020 at 4:18:01 AM UTC-5, Andrew Jones wrote:
>
> The underlying WidgetViewModel is using *value *to save to the database.
>
> If you have bound *this.**username* observable to the textInput then you
> will need to update *this.value* when it changes:
>
> this.username.subscribe(function(usernameValue) {
> this.value(usernameValue);
> });
>
> I've not tested this at all and can't remember if usernameValue is
> returned as a value or observable. If it is an observable then you'll need
> to user usernameValue().
>
> Andy
>
> On Friday, January 17, 2020 at 8:25:58 PM UTC, Angela Labrador wrote:
>>
>> Sure -- here's my sanity check version (putting aside the need to pass
>> the django {{user.username}} as the autofill value and just using a plain
>> string of "abc"):
>>
>> templates/views/components/widgets/text.htm
>> <!-- ko if: node.nodeid ==
>> "a72bbb27-bd5d-11e9-9b8f-94659cf754d0" -->
>> <input type="text" data-bind="textInput: username, attr:
>> {placeholder: placeholder, maxlength: maxLength, disabled: disabled},
>> style: {width: width}" class="form-control input-lg widget-input">
>> <!-- /ko -->
>> <!-- ko ifnot: node.nodeid ==
>> "a72bbb27-bd5d-11e9-9b8f-94659cf754d0" -->
>> <input type="text" data-bind="textInput: value, attr:
>> {placeholder: placeholder, maxlength: maxLength, disabled: disabled},
>> style: {width: width}" class="form-control input-lg widget-input">
>> <!-- /ko -->
>>
>>
>> media/js/views/components/widgets/text.js
>> define(['knockout', 'underscore', 'viewmodels/widget'], function (ko, _,
>> WidgetViewModel) {
>> /**
>> * registers a text-widget component for use in forms
>> * @function external:"ko.components".text-widget
>> * @param {object} params
>> * @param {string} params.value - the value being managed
>> * @param {function} params.config - observable containing config
>> object
>> * @param {string} params.config().label - label to use alongside the
>> text input
>> * @param {string} params.config().placeholder - default text to show
>> in the text input
>> */
>> return ko.components.register('text-widget', {
>> viewModel: function(params) {
>> params.configKeys = ['placeholder', 'width', 'maxLength',
>> 'defaultValue'];
>> WidgetViewModel.apply(this, [params]);
>> this.username = ko.observable("abc");
>> },
>> template: { require: 'text!widget-templates/text' }
>> });
>> });
>>
>>
>> This displays 'abc' in the form field upon load, but returns a 500 error
>> on tile when I click add. I'm not too surprised since params.value is not
>> getting set, but I can't wrap my head around how to autofill the field on
>> the template without setting *all* textwidget params.values to
>> {{user.username}}. I even tried setting attr: value={{user.username}} on
>> the template side without touching the viewmodel, but while the username
>> appeared, it was the same 500 error on tile (no value being passed).
>>
>> Thanks for any ideas!
>> Angela
>>
>>
>>
>> On Friday, January 17, 2020 at 4:31:06 AM UTC-5, Andrew Jones wrote:
>>>
>>> Sounds like you're close. do you mind posting the viewmodel code as a
>>> fresh pair of eyes might be able to help?
>>>
>>> On Wednesday, January 15, 2020 at 11:34:51 PM UTC, Angela Labrador wrote:
>>>>
>>>> Hi everyone,
>>>>
>>>> I have a node, let's call it <userid> (datatype string), which uses the
>>>> default text widget. When users are completing the relevant form, I would
>>>> like to autofill <userid> with the {{user.username}} value (but to still
>>>> allow users to change the value).
>>>>
>>>> I've been trying to avoid writing a new widget to handle this scenario
>>>> and instead use the existing text widget viewmodel and template. I'm
>>>> successfully able to target the correct node by using knockout if/ifnot
>>>> bindings
>>>> e.g.:
>>>>
>>>> <!-- ko if: node.nodeid == "a72bbb27-bd5d-11e9-9b8f-94659cf754d0" -->
>>>> ...
>>>> <!-- /ko -->
>>>> <!-- ko ifnot: node.nodeid == "a72bbb27-bd5d-11e9-9b8f-94659cf754d0" -->
>>>> <input type="text" data-bind="textInput: value, attr:
>>>> {placeholder: placeholder, maxlength: maxLength, disabled: disabled},
>>>> style: {width: width}" class="form-control input-lg widget-input">
>>>> <!-- /ko -->
>>>>
>>>>
>>>> However, each attempt I make at the custom input fails (using either
>>>> value or textInput data-binds). It's seemingly easy to make the correct
>>>> username appear in the form field when the card loads (by setting
>>>> params.value to {{user.username}}) but every time I click Add on the form,
>>>> the tile save function fails validation (500 error), so I'm not actually
>>>> passing the value correctly or it's getting set/unset at the wrong times
>>>> or
>>>> in the wrong order. As a sanity check I've also tried a simple
>>>> data-bind="textInput: userName..." in the template and then this.userName
>>>> =
>>>> ko.observable('abc'); in the textwidget viewmodel, but while abc appears
>>>> in
>>>> the field, I get the same 500 error upon submit. Even when I manually
>>>> delete the field and type something new, the form fails. I should note
>>>> that
>>>> the card has multiple text widgets on it.
>>>>
>>>> I'm fairly new to knockout, so I could be attacking this all wrong or
>>>> missing something fundamental. Any ideas for how this could be done?
>>>> (Trying to avoid editing the resource model...but maybe that can't be
>>>> avoided).
>>>>
>>>> Thanks!
>>>> Angela
>>>>
>>>
--
-- To post, send email to [email protected]. To unsubscribe, send
email to [email protected]. For more information,
visit https://groups.google.com/d/forum/archesproject?hl=en
---
You received this message because you are subscribed to the Google Groups
"Arches Project" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/archesproject/d3b8cd00-ec81-4613-b8db-b8fdd20ec8b9%40googlegroups.com.
