search

BorisMoore / jsviews

Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
http://www.jsviews.com/#jsviews
MIT License
856 stars 130 forks source link

I see a way to use with jquery-ui, but what about Bootstrap 4 ? #425

Closed renaudham closed 5 years ago

renaudham commented 5 years ago

Hi

Is there any way to use all this with Bootstrap4, and not only Jquery UI? Because Bootstrap also has a lot of clean CSS and HTML elements, and specific things like Carroussel etc.

BorisMoore commented 5 years ago

Yes, indeed it should work well alongside Bootstrap. I don't know Bootstrap (and all available components and plugins) well enough to know whether in some cases there could be a conflict. But for basic scenarios it certainly seems to work very will with JsViews.

For example I tried integrating this page: https://getbootstrap.com/docs/4.3/examples/checkout/ with JsViews, and made the content templated and dynamic, along with data-binding on the fields etc. It worked well, including the Bootstrap validation code...

I did things like this:

{^{radiogroup paymentMethod}}
<div class="custom-control custom-radio">
  <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required value="credit">
  <label class="custom-control-label" for="credit">Credit card</label>
</div>
<div class="custom-control custom-radio">
  <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required value="debit">
  <label class="custom-control-label" for="debit">Debit card</label>
</div>
<div class="custom-control custom-radio">
  <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required value="paypal">
  <label class="custom-control-label" for="paypal">PayPal</label>
</div>
{{/radiogroup}}

and:

{^{if paymentMethod==="credit"}}
<div class="col-md-6 mb-3">
  <label for="cc-number">Credit card number</label>
  <input type="text" class="form-control" id="cc-number" placeholder="" required>
  <div class="invalid-feedback">
    Credit card number is required
  </div>
</div>
{{/if}}

But you may need to attend to details, such as Bootstrap not including value="credit" on the input, but using instead id="credit" . {{radiogroup}} expects values to be set, so I added them in the markup above ...

Generally speaking JsViews does insert <script> elements for data binding, but does not otherwise modify the HTML element hierarchy. And Bootstrap does not seem generally to modify HTML element hierarchy through code (javascript). So given that, they can basically play well together...

Also important is that JsViews never imposes any CSS constraints, and never modified CSS 'under the hood' - so BootStrap can completely own that...

BorisMoore commented 5 years ago

Did you test this out? Should be good...

renaudham commented 5 years ago

Great thanks. I will try in the coming weeks.

Regards

johan-ohrn commented 5 years ago

We're using bootstrap 4 in our project without issues. It's just that there are no custom tags to wrap the bootstrap controls like we have for jquery-ui but it's possible to create them.

BorisMoore commented 5 years ago

Thanks for the feedback, Johan. I'll close this now.